2015-10-14 55 views
0

我想讓徽標和我的navigation :ul, li顯示在同一行上。我想不出如何將它們放在同一行上

代碼:

<div class="main-header"> 
     <img class="logo" src="logo-2.png"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Feed</a></li> 
        <li><a href="#">Popular</a></li> 
        <li><a href="#">All</a></li> 
       </ul> 
    </div> 
    </body> 

+1

使用顯示:在列表項inline-block的CSS。 – user2182349

+1

你的CSS在哪裏?沒有CSS,你不能這樣做 – Raptor

+0

快速谷歌搜索「HTML導航UL水平」返回此信息鏈接:http://www.w3schools.com/css/css_navbar.asp – alexanderbird

回答

1

試試這個。

li{display: inline-block} 
 
ul{float: left;} 
 
img{float: left;}
<body class="homepage"> 
 
    <div class="header header-size single-header"> 
 

 
    <div class="main-header"> 
 
     <img class="logo" src="logo-2.png"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Feed</a></li> 
 
        <li><a href="#">Popular</a></li> 
 
        <li><a href="#">All</a></li> 
 
       </ul> 
 
    </div> 
 
    </body>

+0

'display:inline-block'更好,因爲它有** width **。自然內聯元素會根據其內容收縮,這可能不適合菜單。 – Raptor