卡住导航 html css - 如何获得全宽答案

【问题标题】：Stuck with nav html css - how to get it full width卡住导航 html css - 如何获得全宽
【发布时间】：2016-10-02 16:19:29
【问题描述】：

我在这里有一个导航：

http://tumolo.co.uk/navbar/

我已经尝试了各种方法 - 但我无法让这个导航填充浏览器 100% 的宽度。它在导航栏的左侧和右侧都有空白。

我将每个 nav li 设置为 16%，因为它是 100% / 6 个菜单元素，16% 最接近使每个元素大小相等。

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-left: 0px;
  padding-right: 0px;
}
.nav li {
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
.nav a {
  text-decoration: none;
  color: #6b6b6b;
  display: block;
  font-size: 0.8em !important;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #ff0;
  color: #000;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.nav ul li#wind a:hover {
  color: #ffffff;
  background-color: #5da3ab;
}
.nav ul li#wind .active {
  background-color: #5da3ab;
  color: #ffffff;
}
.nav ul li#hmrc a:hover {
  color: #ffffff;
  background-color: #ac5e88;
}
.nav ul li#hmrc .active {
  background-color: #ac5e88;
  color: #ffffff;
}
.nav ul li#cvl a:hover {
  color: #ffffff;
  background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
  color: #ffffff;
  background-color: #5b3e52;
}
.nav ul li#admin a:hover {
  color: #ffffff;
  background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
  color: #ffffff;
  background-color: #7c4c4c;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 16%;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1em;
    border-right: 1px solid #ebe3e3;
  }
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  .nav li:last-child {
    border-right: 0;
  }
  /* Options 2 - Float
    .nav li {
    float: left;
    }
    .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
    }
    .nav {
    background-color: #444;
    }
    */
}

<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
  <ul id="navlist">
    <li id="wind"><a href="#">Winding up petition</a>
    </li>
    <li id="hmrc"><a href="#">Cant pay HMRC?</a>
    </li>
    <li id="cvl"><a href="#">CVA</a>
    </li>
    <li id="mvl"><a href="#">MVL</a>
    </li>
    <li id="admin"><a href="#">Administration</a>
    </li>
    <li id="liquid"><a href="#">Liquidation</a>
    </li>
  </ul>
</div>

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Minimal, Complete, and Verifiable example (MCVE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！

标签： html css

【解决方案1】：

Flexbox 会带你到那里！

.nav ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

如果您希望两端与边缘齐平，最好使用：

justify-content: space-between;

查看元素上的现有样式，您可以删除 padding-left 和 padding-right，如 cmets 中所述。此外，使用flex，您可能需要查看供应商前缀。

注意：对旧 IE 的支持可能不稳定。

上面确实在标题中留下了空白，正如 cmets 中所提到的那样。 Joe 建议的另一种选择是：

#navList {
  display:flex;
}
#navList li {
  flex:1 auto;
}

【讨论】：

justify-content: space-around;... 嗯。为什么不直接将flex: 1 auto; 添加到.nav li？另外，#navlist 需要 padding:0;
@JosephMarikle 按 id 的样式通常被认为是 bad form。样式按原样工作，我将它们粘贴到他的样式表中进行验证，尽管删除 padding-right 确实摆脱了不需要的样式。 flex:1 auto 可能会起作用，这种方法只是我想到的第一个方法 :)
左边看起来不错，但是如果我应用了 float:left;
@MatthewJohnson 我并不是说要使用 ID 进行样式设置。我通过 ID 引用需要样式的元素，因为它已经在 OP 的样式表中具有样式，并且是开发人员工具中最高的样式。理想情况下，它会采用.nav ul 风格。另外，我不确定您在测试什么，但在 Mac 上的 Chrome 52 中，填充会导致空白留下巨大的空白。此外，如果没有 flex 属性，在 chrome 中它会折叠看起来非常狭窄的导航元素。
@MatthewJohnson 这就是我建议flex: 1 auto 的原因。 justify-content:space-between 在链接之间留下不可点击的间隙，但 flex-grow: 1 和 flex-basis: auto 会自动调整。我可能会误解 OP 的意图，但我认为这些差距是不希望的。话虽这么说，你的方法是我认为最好的选择，前提是不需要旧的 IE 支持（我现在有点假设）。

【解决方案2】：

如果不是绝对必要，我会在 .nav li 上放弃 display: inline-block; - 它会混淆宽度计算，正如您所知，因为您已经使用每个 -4px 对其进行了调整，这只是一个近似值.

如果您将.nav li 向左浮动，添加box-sizing: border-box; 并将宽度增加到16.6667%，您将获得总覆盖率。您必须调整 .nav ul 以正确包含它，但我已经更新了下面的 sn-p 以显示。

body {
    background: #ccc none repeat scroll 0 0;
    margin: 0;
    padding: 0;
}
.nav ul {
    background-color: #fff;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    float: left;
    width: 100%;
}
.nav li {
    border-bottom: 1px solid #888;
    font-size: 1em;
    height: 40px;
    line-height: 40px;
}
.nav a {
    color: #6b6b6b;
    display: block;
    font-size: 0.8em !important;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
}
.nav a:hover {
    background-color: #ff0;
    color: #000;
}
.nav a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
}
.nav ul li#wind a:hover {
    background-color: #5da3ab;
    color: #ffffff;
}
.nav ul li#wind .active {
    background-color: #5da3ab;
    color: #ffffff;
}
.nav ul li#hmrc a:hover {
    background-color: #ac5e88;
    color: #ffffff;
}
.nav ul li#hmrc .active {
    background-color: #ac5e88;
    color: #ffffff;
}
.nav ul li#cvl a:hover {
    background-color: #5e7ea4;
    color: #ffffff;
}
.nav ul li#mvl a:hover {
    background-color: #5b3e52;
    color: #ffffff;
}
.nav ul li#admin a:hover {
    background-color: #7c6e61;
    color: #ffffff;
}
.nav ul li#liquid a:hover {
    background-color: #7c4c4c;
    color: #ffffff;
}
@media screen and (min-width: 600px) {
.nav li {
    border-bottom: medium none;
    border-right: 1px solid #ebe3e3;
    font-size: 1em;
    height: 50px;
    line-height: 50px;
    width: 16.6667%;
    box-sizing: border-box;
    float: left;
}
.nav li:last-child {
    border-right: 0 none;
}
}

<div class="nav"> 
	<ul id="navlist"> 
		<li id="wind"><a href="http://propertycrowdinvestor.com/insolvency/winding-up-petition/">Winding up petition</a></li> 
		<li id="hmrc"><a href="http://propertycrowdinvestor.com/insolvency/cant-pay-hmrc/">Cant pay HMRC?</a></li> 
		<li id="cvl"><a href="http://propertycrowdinvestor.com/insolvency/cvl/">CVA</a></li> <li id="mvl"><a href="http://propertycrowdinvestor.com/insolvency/mvl/">MVL</a></li> 
		<li id="admin"><a href="http://propertycrowdinvestor.com/insolvency/administration/">Administration</a></li> 
		<li id="liquid"><a href="http://propertycrowdinvestor.com/insolvency/liquidation/">Liquidation</a></li> 
	</ul> 
</div>

【讨论】：

你当然可以。我已经用上面的代码编辑了我的答案。
但是，左侧大约有 1px 的白色 - 我该如何摆脱它？我现在已经在上面发布了我的原始代码.... thx（obvs 现在将其更改为 16.6% 宽度）
丹尼尔 - 100% 加油！非常感谢。
酷。将其标记为已回答！ :)

【解决方案3】：

我从您的解释中了解到，您正在尝试制作具有 100% 宽度的标题导航，并且菜单的节点将具有相同的宽度；

你应该使用calc()让我给你一个例子，你可以将它应用到你的代码中；

<div class="nav">
   <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
   </ul>
</div>

也在你的 CSS 中；

.nav { height:30px; width:100%; 
  border-bottom:1px solid #000;}
.nav li { 
  width:calc(100% / 4); 
  list-style: none; 
  text-align:center;
  float:left;
}

我们将 %100 划分为 4，因为 我们的导航中有 4 个 li 元素。

检查 jsfiddle：https://jsfiddle.net/d9b1re2p/1/

希望这会有所帮助，请发布您的代码，因为它在您的问题中得到了简化，下次有更好的解释。

【讨论】：

【解决方案4】：

使用 CSS 表格。它的行为很像 flex box，但支持更好。

它会在不需 16% 的媒体查询的情况下将每个 li 上下均等地隔开。

您只需要稍微调整链接的样式即可添加到您的边框中。

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-left: 0px;
  padding-right: 0px;
  display:table;
  width:100%;
  table-layout:fixed;
}
.nav li {
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  display:table-cell;
  vertical-align:top;
  position:relative;
}
.nav a {
  text-decoration: none;
  color: #6b6b6b;
  display: block;
  font-size: 0.8em !important;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #ff0;
  color: #000;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.nav ul li#wind a:hover {
  color: #ffffff;
  background-color: #5da3ab;
}
.nav ul li#wind .active {
  background-color: #5da3ab;
  color: #ffffff;
}
.nav ul li#hmrc a:hover {
  color: #ffffff;
  background-color: #ac5e88;
}
.nav ul li#hmrc .active {
  background-color: #ac5e88;
  color: #ffffff;
}
.nav ul li#cvl a:hover {
  color: #ffffff;
  background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
  color: #ffffff;
  background-color: #5b3e52;
}
.nav ul li#admin a:hover {
  color: #ffffff;
  background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
  color: #ffffff;
  background-color: #7c4c4c;
}

<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
  <ul id="navlist">
    <li id="wind"><a href="#">Winding up petition</a>
    </li>
    <li id="hmrc"><a href="#">Cant pay HMRC?</a>
    </li>
    <li id="cvl"><a href="#">CVA</a>
    </li>
    <li id="mvl"><a href="#">MVL</a>
    </li>
    <li id="admin"><a href="#">Administration</a>
    </li>
    <li id="liquid"><a href="#">Liquidation</a>
    </li>
  </ul>
</div>

【讨论】：