使用 CSS 使 <li> 适合 <ul> 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9894176/
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
Make <li> fit the width of the <ul> using CSS
提问by jbk
I'm trying to make the <li>fit the width of the <ul>but even with width:autoit doesn't work at all, and I don't know why. I tried to use display:inline-blockbut this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
我试图使<li>适合的宽度，<ul>但即使width:auto它根本不起作用，我不知道为什么。我尝试使用，display:inline-block但这是相同的。我不知道我会有多少个标签，所以这就是我不直接使用百分比的原因。
I would like to display the list inline when I display the page on a desktop and display one liper line when I am on a smartphone (with media queries).
我想在桌面上显示页面时内联显示列表li，在智能手机上显示每行一个（使用媒体查询）。
I have this:
我有这个：
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
我的 CSS 看起来像这样：
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
回答by Chionsas
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
我找到了这种处理单行全宽 ul 的方法，其中未定义数量的 li 元素需要均匀隔开：
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+. For IE7 and downwards you should use some inline-block hackery :)
基本上，它模拟一张桌子。适用于 Gecko、Webkit、IE8+。对于 IE7 及以下版本，您应该使用一些内联块hackery :)
回答by jello
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
由于 li 计数可以更改，因此我只能按照您的建议使用 javascript/jquery 来完成此操作。只需将 100 除以 li 的 # 并设置每个的宽度。
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
您可能必须根据填充和其他内容来调整宽度。
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
作为旁注，如果您还没有，我建议您使用firebug 之类的工具，它可以让您编辑 css 并即时执行 js。它对于微调外观非常有用。
回答by Mr Lister
If you want to fill the width of the <ul>with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-blockyou make the spaces between the <li>count, so the total width of the <ul>content will be more than 100% wide. I'd suggest removing the display:inline-blockand giving them float:left.
如果你想<ul>用五个<li>s填充宽度，你必须给<li>每个 sa 宽度 20%。
请注意，如果您想让它工作，您需要更改 CSS 的一些其他细节；例如，display:inline-block您在<li>计数之间留出空格，因此内容的总宽度<ul>将超过 100%。我建议删除display:inline-block并给他们float:left。
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
编辑：或者您希望它们根据其内容按比例分配吗？那将是一个不同的挑战。
回答by Nikit Barochiya
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>
回答by w3uiguru
try below css:
试试下面的css：
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
看屏幕截图：
