我想不出如何将它们放在同一行上

问题描述：

我想让徽标和我的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>

使用显示：在列表项inline-block的CSS。 – user2182349

你的CSS在哪里？没有CSS，你不能这样做 – Raptor

快速谷歌搜索“HTML导航UL水平”返回此信息链接：http://www.w3schools.com/css/css_navbar.asp – alexanderbird

答

试试这个。

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>

'display：inline-block'更好，因为它有** width **。自然内联元素会根据其内容收缩，这可能不适合菜单。 – Raptor

我想不出如何将它们放在同一行上

相关推荐