html - 使用相等的填充均匀分布列表项(最好不用 JavaScript)

Question

我正在尝试只制作 HTML/CSS <ul> <li> 的布局元素均匀分布在可用宽度上，<a> 之间的填充和 <li>元素都是一样的。这是我的 HTML 代码(不是很令人兴奋):

<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 值的最佳方法是什么？ ？我也想要x最大值为 100px，在本例中为 <ul> 的宽度与可用宽度不同。

我认为这可以通过 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 标签？所以你的悬停效果会填满该元素的整个宽度。当然，您也可以将它交给 LI。

当然，您需要在 jQuery 调用中调整您的选择器。 如果您制作了 LI 的 inline-block，您还应该将它们写在一行中或给它们 float: left 以防止白色-它们之间的空间。 在我的示例中，您的 UL 需要填充整个宽度(display: block)。