1

我正在尝试使用以下代码创建一个由块组成的导航栏： 

<nav id="mainnav">
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

这个CSS 

#mainnav
{
    padding: 0px;
}

#mainnav li
{
    display:inline-block;
}

#mainnav a
{
    /* box */
    display: block;
    padding: 3px;
    width: 208px;
    margin: 2px;
    border: 1px solid rgb(85,85,85);
    /* text */
    text-align: center;
}

（见小提琴：这里）

现在，我的盒子排成一行，每行尽可能多的盒子，这就是我要找的。

但是，我想插入一个自动边距，使它们像某种对齐的文本（并使用整个水平空间），或者让框水平拉伸以填充空间。

我试过margin: 2px auto;了，但它并没有像我想要的那样。我尝试min-width了属性，它也不起作用。还有其他几件事。

现在我的想法已经不多了，谷歌也没有帮助我。
我怎样才能做到这一点？

4

2 回答 2

2

我相信如果没有 JQuery（或 Javascript），您将无法解决此问题。

我做了这个，希望对你有帮助：

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: red;
    width: 400px;
}
#nav li {
    display: inline-block;
    background: green;
    margin: 0; /* must be 0 on the left and right */
    padding: 0; /* must be 0 on the left and right */
    margin-right: -4px; /* delete default inline-block margin */
}
#nav li a {
    display: block;
    padding: 5px 0; /* padding-left and right must be 0 */
    margin: 5px;
    background: yellow;
}

查询

$(document).ready( function() {
    var ulWidth = $("#nav").width();

    var aTotalWidth = 0;
    var numA = 0;

    $("#nav li a").each( function() {
        var aWidth = $(this).width() 
            + parseInt($(this).css("margin-left")) 
            + parseInt($(this).css("margin-right"))
            + parseInt($(this).css("borderLeftWidth")) 
            + parseInt($(this).css("borderRightWidth"));
        aTotalWidth += aWidth;
        numA += 1;
    });

    var spaceBetween = ulWidth - aTotalWidth;
    var aPadding = Math.floor( spaceBetween / (numA * 2 ) );

    $("#nav li a").each( function() {    
        $(this).css('padding-left', aPadding);
        $(this).css('padding-right', aPadding);
    });
});

工作演示

于 2013-07-11T09:03:41.817 回答
-2

只需创建一个

<Div id="container> 
</div>

与CSS

#container {
      position: fixed;
      left: 0%;
      right: 0%;
      top: 0%;
      color: grey;
      border-width: 0px;     
      padding: 0px;
      width: 100%;
      height: 100%;
}
于 2013-09-27T22:06:52.233 回答