使用相等的填充均匀地传播列表项（最好不使用JavaScript）

Question

我正在尝试制作仅限<ul>布局的{/ 1}}布局，其中<li>项均匀分布在可用宽度上，以及<a>和{{1}之间的填充元素都是一样的。这是我的HTML代码（不是很令人兴奋）：

<li>

结果应如下所示：

<ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2 with long name</a></li> <li><a href="#">item 3</a></li> </ul> 当然代表填充量，对于列表中的每个项目都是相同的。

我尝试使用x，但这并没有达到预期效果。使用display: table时，display: table项之间的间距取决于<li>元素中文本的长度，因此每个元素的<a>都不同。

由于可用宽度和x项的数量是可变的，确定<li>的值的最佳方法是什么？我还希望x的最大值为100px，在这种情况下，x的宽度与可用宽度不同。

我认为这可以通过JavaScript实现，但由于页面上已有很多JavaScript，我不想再使用JavaScript了。所以我更喜欢仅使用CSS / HTML的解决方案。

Answer 1

这是我正在使用的JavaScript：

var containerWidth = $('ul').outerWidth();
var liWidthTotal = 0;

$('li').each(function() {
    liWidthTotal += $(this).outerWidth();
});

var padding = Math.round((containerWidth - liWidthTotal) / ($('.topNav > div > ul > li').length*2));

$('.li > a').each(function() {
    $(this).css('padding', '0px ' + padding + 'px');
});

我基本上检查可填充的空间大小（ul的宽度 - li的宽度）并将其平均传播到所有A - 标记为填充。为什么选择a-tags？因此，您的悬停效果会填充该元素的整个宽度。您当然可以将其提供给LI。

当然你需要在jQuery调用中调整你的选择器。 如果你创建了LI inline-block，你也应该将它们写在一行中，或者给它们float: left以防止它们之间出现空白。 在我的示例中，UL需要填充整个宽度（display: block）。

Answer 2

请参阅this fiddle，您希望在列表项上使用display:table-cell;，在列表元素上使用display:table;。在每个列表项上，然后执行padding: 0 100px;

CSS：

body{
    margin:0;
    padding:0;
    width:100%;
}
ul{
    margin:0;
    padding:0;
    width:100%;
    display:table;
}
li{
    border:1px solid red;
    padding:0 100px;
    text-align:center;
    display:table-cell;
}

Answer 3

html

<ul>
    <li><a href="#">bipin</a></li>
    <li><a href="#">bipin kumar pal</a></li>
    <li><a href="#">pal</a></li>
</ul>

CSS

ul{
    width:100%;
    display:table;
}
li{
    border:2px solid green;
    display:table-cell;
    text-align:center;
}

请参阅此链接http://jsfiddle.net/bipin_kumar/t2B4B/5/

Answer 4

我刚编辑下面的小提琴以匹配你的要求。试试这个小提琴：http://jsfiddle.net/t2B4B/9/

CSS：

body{
 margin:0;
 padding:0;
 width:100%;
}
ul{
 margin:0;
 padding:0;
 width:100%;
 display:table;
}
li{
 border:1px solid red;
 padding-left:20px;
 padding-right:20px;
 display:table-cell;
}