所以,我试图创建一个水平列表,用于我正在设计的新网站。我已经尝试过在网上找到的一些建议,例如将'float'设置为左边等等 - 但在解决这个问题时,这些都没有用。
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="index.php">DJ Profiles</a>
</li>
</ul>
目前我不确定是什么导致了这个问题,我将如何解决并解决它?
答案 0 :(得分:77)
我注意到很多人都在使用这个答案,所以我决定稍微更新一下。如果您想查看原始答案,请查看下面的内容。新的答案演示了如何在列表中添加一些样式。
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
<ul>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">another item</a>
</li>
</ul>
答案 1 :(得分:6)
这个小提琴显示了如何
ul, li {
display:inline
}
这里有关于列表和CSS的精彩参考:
答案 2 :(得分:5)
更好的方法是使用inline-block
,因为您不再需要在列表末尾使用clear:both
。
试试这个:
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
答案 3 :(得分:2)
您还可以使用内联块来避免浮动元素
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
然后样式为:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
这样你就不需要浮动任何东西,从而无需使用clearfixes
答案 4 :(得分:0)
Here您可以找到一个有效的示例,其中包含有关动态调整列表大小的更多建议。
我使用了display:inline-block和百分比填充,以便父列表可以动态更改大小:
display:inline-block;
padding:10px 1%;
width: 30%
再添加两条规则来删除第一个和最后一个项目的填充。
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
答案 5 :(得分:0)
我想下面找到的简单解决方案
ul{
display:flex;
}