Question

我正在尝试在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>

Answer 1

您可以使用仅限CSS的解决方案。

只需在父级ul上使用text-align: justify inline-block个子元素。

为了证明合理，你需要伪造两行文本，但这可以通过添加幻像元素或我更喜欢使用:after伪元素来轻松完成

稍微多一点，所以这里有一个工作小提琴：

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

Answer 2

不要将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/

Answer 3

您可以使用 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

导航项目100％在div内传播，偶数填充

3 个答案: