0

我试图在 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>
4

3 回答 3

2

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

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

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

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

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

于 2013-09-07T09:03:11.790 回答
1

不要使用 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/

于 2013-09-07T08:17:08.020 回答
1

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

当涉及到margin您申请时，就会出现问题。表格单元格没有边距，因此您必须解决它。我在右侧添加了一个边框。您也可以使用边框间距，但它有点复杂。作为两者，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');

演示

先试后买

于 2013-09-07T09:01:49.377 回答