导航项目 100% 分布在 div 内，填充均匀答案

【问题标题】：navigation items 100% spread within a div with even padding导航项目 100% 分布在 div 内，填充均匀
【发布时间】：2013-09-07 07:51:12
【问题描述】：

我试图在 div 标签内均匀分布导航项。我的代码如下。它进行一些计算并给出结果。

在 Chrome、Opera 和 Safari 上运行正常，但在 IE8 和 Firefox 上确实有一些问题。我想要的是将所有计算结果（li 宽度、容器宽度、填充）转换为百分比而不是像素，以便在所有浏览器上正常工作。

如果有人有解决方案，请告诉我。

而且我的代码在刷新后有时也会出现问题，这可能是什么原因？

谢谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    width: 960px;
    margin: 0 auto;
}
.container {
    width: 100%;
}
.menu {
    width: 100%;
    list-style: none;
}
.parent {
    float: left;
    background: red;
    margin-right: 1px;
    padding: 0;
}
.parent:last-child {
    margin-right: 0px;
}
</style>
</head>
<body>
<div class="container">
  <ul class="menu">
    <li class="parent"><a href="#">О Фонде</a> </li>
    <li class="parent"><a href="#">Дети</a> </li>
    <li class="parent"><a href="#">Проекты</a> </li>
    <li class="parent"><a href="#">Новости</a> </li>
    <li class="parent"><a href="#">Как помочь</a> </li>
    <li class="parent"><a href="#">Вам нужна помощь?</a> </li>
    <li class="parent"><a href="#">Специалистам</a> </li>
    <li class="parent"><a href="#">Волонтерство</a> </li>
  </ul>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script>
$(document).ready(function() {
var a = $(".menu li.parent").length;
var b = 0;
$(".menu li.parent").each(function(){
    b = b + $(this).width() 
});
var c = ($(".container").width() - b - (a-1))/a ; 
var d = c/2;
$(".parent").css("padding", d)

});
</script>
</body>
</html>

【问题讨论】：

建议您向我们提供带有相关代码的jsfiddle.net。
您应该使用描述性变量名称，而不是字母表
这是demo。您的脚本不会在 Safari 中将 <li>-元素分布在 960px 宽度上。它在 Forefox 中很接近，但仍有差距。两者都在 MAC、最新的浏览器上进行了测试。

标签： javascript html css menu navigation

【解决方案1】：

您可以为此使用纯 CSS 解决方案。

只需在带有inline-block 子元素的父ul 上使用text-align: justify。

为了让 justify 正常工作，您需要伪造两行文本，但这很容易通过添加幻像元素来完成，或者我更喜欢使用 :after 伪元素

还有一点点，所以这里是一个工作小提琴：

http://jsfiddle.net/lee_gladding/cjvCC/

【讨论】：

【解决方案2】：

您可以使用 CSS 表格在整个宽度上平均分配所有具有百分比内边距的元素。不需要 JavaScript。

当涉及到您申请的margin 时，问题就出现了。表格单元格没有边距，因此您必须解决它。我在右侧添加了一个边框。您也可以使用border spacing，但它有点复杂。因为border-width和border-spacing都不能取百分比，所以你仍然需要计算它们。为此，我编写了一个小脚本，就是这样做的。使用动态宽度时，您可以将其称为“onresize”。玩得开心。

HTML

<div class="container">
    <ul class="menu">
        <li class="parent"><a href="#">О Фонде</a> </li>
        <li class="parent"><a href="#">Дети</a> </li>
    </ul>
</div>

CSS

ul {
    display: table;
    width: 100%;
    list-style: none;
}

ul > li {
    display: table-cell;
    padding: 1%;
    text-align: center;
    border-right: 1px solid white;
}

ul > li:last-child {
    border: 0;
}

JavaScript

var container = $('div.container');
var elements = $('ul.menu > li');

var borderSize = Math.ceil( container.width() / elements.length / 100);

elements.css('borderRightWidth', borderSize + 'px');

演示

Try before buy

【讨论】：

【解决方案3】：

不要使用 Jquery 作为你不需要的开始。这是我更改的 css 行：

.menu {
    width: 100%;
    list-style: none;
    position: relative;
}
.parent {
    float: left;
    background: red;
    margin-right: 1px;
    padding: 2%;
}

这是一个有效的小提琴：

http://jsfiddle.net/Hive7/nn273/

【讨论】：

谢谢，但它似乎对我不起作用，因为我的网站是多语言的，并且将添加语言并且菜单项的宽度将会改变。我想要一些动态的东西，它会为我计算一切。