Question

我正在尝试创建水平导航栏，填充屏幕或父容器，并且对于元素将具有相等的水平填充，这将在较小的窗口宽度上同样减少。使用display：table-cell我已经到了很好地减少但不相等的程度。较长的标题有更多的填充。我愿意接受任何有效的解决方案，理想情况是css，但如果这不可行，那么任何能够在没有故障的情况下工作的东西。到目前为止我能看到的是什么

ul {
list-style:none;
padding:0;
width:100%;
display:table;
border-top:1px solid;
border-bottom:1px solid;
border-left:1px solid
}
li {
border-right: 1px solid;
margin:0;
display:table-cell;
position:relative;
text-align:center
}
<ul>
<li>some title</li>
<li>some longer title</li>
<li>some title</li>
</ul>

http://jsfiddle.net/xZ6q3/16/

Answer 1

解决了它（并且学到了很多东西）。基本思想是遍历所有列表项并计算平均填充。然后再次浏览它们并将它们的宽度设置为文本宽度+平均填充。

继续更新的jsfiddle：http://jsfiddle.net/xZ6q3/21/

// calculate the average padding
var totalPadding = 0;
var count = 0;
$('li').each(function(){
    var t = $(this);
    var outer = t.outerWidth(true);        
    var inner = t.textWidth();        
    var padding = outer - inner;
    totalPadding += outer - inner;
    count++;
});
totalPadding /= count;

// set each width to text width + average padding
$('li').each(function(){
    var t = $(this);
    var inner = t.textWidth();
    var newWidth = inner + totalPadding;    
    t.css('width', newWidth);
});

为了使它工作，我不得不使用Phil的textWidth()并听取窗口调整大小事件。见jsFiddle。

Answer 2

试试这个

ul {
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-top: 1px solid;
    display: inline-block;
    list-style: none outside none;
    padding: 0;
}
li {
    border-right: 1px solid;
    display: inline-block;
    margin: 0;
    padding: 0 17px;
    position: relative;
    text-align: center;

}

Answer 3

首先，我会选择 float：left 属性，然后更改不同屏幕分辨率的值。

ul li {
float:left;
padding-left: 15px;
padding-right: 15px;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
ul li {
padding-left: 5px;
padding-right: 5px;
}
}

如何为导航元素实现相同的响应填充？

3 个答案: