2015-10-14 53 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