CSS：修复了水平菜单、可变宽度标签、使用 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1859243/
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
CSS: Fixed with horizontal menu, with variable width tabs, using ul
提问by cbp
I have a horizontal menu. The markup looks like this:
我有一个水平菜单。标记如下所示：
<ul class="menu">
<li>Item 1</li>
<li>Longer Item 2</li>
<li>Item 3</li>
</ul>
Submenus and suckerfish dropdowns will come later.
子菜单和吸盘鱼下拉菜单稍后会出现。
The ulneeds to span the width of the page (e.g. 100% or 1000px).
的UL需要跨越页（例如，100％或1000像素）的宽度。
The lisshould vary in width based on their content.
该LIS应在宽度根据其内容有所不同。
So the result would look like this:
所以结果应该是这样的：
-----------------100% of page------------
|--Item 1--|--Longer item 2--|--Item 3--|
Now it is easy to do this by fixing a width for each li tag, but because the menu will be CMS driven I need to allow the width of the tabs to vary automatically. With a tablethis would be trivial, but I can't think of a way to do it with a ul.
现在通过为每个 li 标签固定一个宽度很容易做到这一点，但是因为菜单将是 CMS 驱动的，所以我需要允许选项卡的宽度自动变化。使用表格这将是微不足道的，但我想不出用ul来做到这一点的方法。
采纳答案by cbp
Here's my jquery solution:
这是我的 jquery 解决方案：
var actualWidth = 1000;
var totalLIWidth = 0;
// Calculate total width of list items
var lis = $('ul li');
lis.each(function(){
totalLIWidth += $(this).width();
});
// Work out how much padding we need
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2);
// To account for rounding errors, the error is going to be forced into the first tab.
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth;
// Apply padding to list items
lis.each(function(i) {
if(i==0) {
$(this).css('padding-left',requiredPadding-roundingErrorFix+'px')
.css('padding-right',requiredPadding-roundingErrorFix+'px');
}
else {
$(this).css('padding-left',requiredPadding+'px')
.css('padding-right',requiredPadding+'px');
}
});
回答by Boldewyn
This is a case for
这是一个案例
Display:Table-Man
显示：桌人
ul {
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
Unfortunately, you should abandon the thought of supporting IEs 6 and 7, but else this is the way to go (or switching to HTML tables, which might or might not be so far away from the semantic content of the markup).
不幸的是，您应该放弃支持 IE 6 和 7 的想法，否则这是要走的路（或切换到 HTML 表，这可能与标记的语义内容相差甚远）。
回答by Gausie
If you're happy using JavaScript, jQuery could solve the issue as follows
如果你喜欢使用 JavaScript，jQuery 可以解决以下问题
var $menu, totalwidth;
$menu = $('ul.menu');
totalwidth = ($menu.width()/100);
$('ul.menu li').each(function(){
this.css('width',String(Math.floor(this.width()/totalwidth))+'%');
});
$menu.css('width','100%');
That's untested, but looks right to me. Comment if you've any questions at all.
这是未经测试的，但在我看来是正确的。如果您有任何问题，请发表评论。
回答by wheresrhys
I reckon boldewyn's suggestion should work. I would use this approach for modern browsers and then use conditional comments to feed the following to ie6/7, so that the nav looks ok there , though won't span the 100% width.
我认为boldewyn 的建议应该有效。我会在现代浏览器中使用这种方法，然后使用条件注释将以下内容提供给 ie6/7，这样导航在那里看起来还可以，但不会跨越 100% 的宽度。
ul {
width: 100%;
}
li {
float:left; // or display:inline-block;
}
回答by LorenVS
If you are trying to style the ul (such that it stretches across the entire page), your best bet is to wrap it in a div, and style the div, and then allow the ul to just stretch as far as its content carries it
如果您尝试设置 ul 的样式（使其延伸到整个页面），最好的办法是将其包装在 div 中，并设置 div 的样式，然后让 ul 延伸到其内容承载它的位置
