适合屏幕宽度的箱型导航栏？

我试图创建通过使用此代码块组成的导航栏：适合屏幕宽度的箱型导航栏？

<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属性，它也不起作用。还有其他一些事情。

现在我已经没有想法，Google也没有帮助我。
我该如何做到这一点？

来源

2013-07-11 Levans

的CSS，你将不能够只用css来做到这一点 - 你将需要检查的一个javascript在'ul'和第一'li'的宽度，计算出有多少在一排去，计算需要多少填补最后一行，并相应调整最后一排'li's的宽度。 – easwee

是否允许JQuery？ – LinkinTED

@easwee现在我正在研究html-css唯一的设计。但是主要的交易并不是最后一行，而是整组箱子在右侧留下空的空间。举例来说，如果有空间可以放置每行3.5个盒子，我有3个盒子加上每行右侧半个盒子的空白空间。我希望箱子或箱子之间的空间能伸展整个空间。最后一行发生的事情并不重要。 – Levans

我相信你不能解决这个没有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

来源

2013-07-11 09:03:41 LinkinTED

问题是，哪里箱进入几行，如果'＃nav'宽度是不够的，让他们在一个单一的一个脚本不能处理的情况。另外我试图做一些动态的，这将适应导航窗口的大小。但我会看看我能否根据你的想法做点什么。 – Levans

-2

只需创建一个

<Div id="container> 
</div>

与

#container { 
     position: fixed; 
     left: 0%; 
     right: 0%; 
     top: 0%; 
     color: grey; 
     border-width: 0px;  
     padding: 0px; 
     width: 100%; 
     height: 100%; 
}

来源

2013-09-27 22:06:52

适合屏幕宽度的箱型导航栏？

回答

相关问题