Html 水平列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15710701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal list items
提问by Christopher Orchard
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
因此，我尝试创建一个水平列表，以在我正在设计的新网站上使用。我已经尝试了一些已经在网上找到的建议，例如将“浮动”设置为左等 - 但是在解决问题时这些都没有奏效。
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>Currently I am unsure of what is causing this issue, how would I go about and resolve it?
目前我不确定是什么导致了这个问题，我将如何解决它？
回答by What have you tried
Updated Answer
更新答案
I've noticed a lot of people are using this answer so I decided to update it a little bit. If you want to see the original answer, check below. The new answer demonstrates how you can add some style to your list.
我注意到很多人都在使用这个答案，所以我决定稍微更新一下。如果您想查看原始答案，请查看以下内容。新答案演示了如何向列表中添加一些样式。
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>回答by PaulProgrammer
This fiddle shows how
这个小提琴展示了如何
ul, li {
display:inline
}
Great references on lists and css here:
关于列表和 css 的重要参考在这里：
回答by Mostafa Shahverdy
A much better way is to use inline-block, because you don't need to use clear:bothat the end of your list anymore.
更好的方法是使用inline-block，因为您不再需要clear:both在列表末尾使用。
Try this:
尝试这个：
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
CSS:
CSS：
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
回答by Jamie
You could also use inline blocks to avoid floating elements
您还可以使用内联块来避免浮动元素
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
and then style as:
然后样式为：
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
这样你就不需要浮动任何东西，消除对clearfixes的需要
回答by alexcasalboni
Hereyou can find a working example, with some more suggestions about dynamic resizing of the list.
在这里您可以找到一个工作示例，其中包含有关动态调整列表大小的更多建议。
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
我使用了 display:inline-block 和百分比填充，以便父列表可以动态更改大小：
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
加上另外两个规则来删除第一个和最后一个项目的填充。
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
