Question

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

<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;
}

（参见小提琴：here）

现在，我的箱子每行都有尽可能多的箱子，这就是我所寻找的。

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

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

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

Answer 1

我相信如果没有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;
}

<强> JQUERY

$(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);
    });
});

Working DEMO

Answer 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%;
}

盒装导航栏适应屏幕宽度？

2 个答案: