如何强制设置导航栏宽度自动？

Question

我希望我的导航栏宽度自动适合。

这是我的CSS

的一部分

#nav-bar {
    width: 960px;
    margin: 0 auto;
}

这是我的整个工作代码

http://codepen.io/anon/pen/ogBxxN

这是我的结果

当我将宽度调整为900时，这就是我所看到的

当我将宽度调整为1000时，这就是我所看到的

正如你所看到的，他们都没有给我最好的结果。

我想知道也许一些CSS专家可以帮我解决这个问题。

Answer 1

这应该为你使用flexbox

#nav-bar ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display:flex;
flex-direction:row;
}
#nav-bar li {
text-align: center;
float: left;
order:1;
flex-grow:1;

}

顺便说一下，使用.inline li和＃nav-bar li

两次设置列表项的样式

Demo

Answer 2

尝试将white-space: nowrap;添加到您的ul元素，并仅在display: inline-block;元素上使用li，而不是float: left;元素。

实施例： http://codepen.io/jessikwa/pen/YPNqpw

Answer 3

在CSS中使用当前代码：

.inline li {
    width: 16.666%;} // 100 divided by number of items

#nav-bar li a {
    padding: 0;} // remove the padding

Answer 4

使用table布局：

＆＃13;

＆＃13;

*{margin:0;padding:0;}
#nav-bar ul {
  width: 100%;
  border: 1px solid #c2c2c2;
  display:table;
  white-space:nowrap;
  text-align:center;
}
#nav-bar li  { display:table-cell; }
#nav-bar li a{
  position:relative;
  display:block;
  background:#eee; /*put back your gradients here */
  line-height: 40px;
  height: 41px;
  font-size: 20px;
  color:#000;
  padding: 0 10px;
}

＆＃13;

<div id="nav-bar">
  <ul class="inline">
    <li><a href="#Europe">Europe</a></li>
    <li><a href="#Asia">Asia</a></li>
    <li><a href="#North America">North America</a></li>
    <li><a href="#Oceania">Oceania</a></li>
    <li><a href="#South America">South America</a></li>
    <li><a href="#South America">South America</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

那就是它。