为什么我的导航相对于浏览器的宽度不是 100%

Question

如果您测试此代码并调整浏览器 window 的大小，最后一个列表项 "sign up" 悬停时（这是唯一的判断方式）它不会拉伸 100%。我尝试了很多不同的方法。如果有人可以测试并找到解决方案；请解释你是如何修复它的，我可以学习。请。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(182, 182, 182, 1);
}
div.main_container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: url("../images/IMG_0060.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
div.nav_container {
  position: fixed;
  z-index: 1;
  height: 50px;
  width: 100%;
  min-width: 700px;
  background-color: rgba(34, 34, 34, .75);
}
ul.nav {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
  width: 100%;
}
ul.nav li {
  background-color: transparent;
  display: table;
  float: left;
  height: 50px;
  width: 12.5%;
  text-align: center;
}
ul.nav li marquee {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  font-family: fantasy;
}
ul.nav li a {
  text-decoration: none;
  text-transform: capitalize;
  font-family: fantasy;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  color: lightgray;
  font-weight: bold;
}
ul.nav li:hover {
  background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
  background-color: black;
  color: lightgreen;
}
ul.nav li:hover a {
  color: black;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Kendall's Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
  <div class="main_container">
    <div class="nav_container">
      <ul class="nav">
        <li>
          <a href="#">home</a>
        </li>
        <li>
          <a href="#">kendall</a>
        </li>
        <li>
          <a href="#">projects</a>
        </li>
        <li>
          <a href="#">social</a>
        </li>
        <li>
          <a href="#">tutorials</a>
        </li>
        <li>
          <marquee scrollamount="2">
            some sliding text
          </marquee>
        </li>
        <li>
          <a href="#">login</a>
        </li>
        <li>
          <a href="#">sign up</a>
        </li>
      </ul>
      <!--Closing of the nav-->
    </div>
    <!--Closing of the nav_container-->
  </div>
  <!--Closing of the main_container-->
</body>

</html>

Answer 1

您可以将 ul.nav li 的 last-child 更改为 float:right

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(182, 182, 182, 1);
}
div.main_container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-image: url("../images/IMG_0060.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
div.nav_container {
  position: fixed;
  z-index: 1;
  height: 50px;
  width: 100%;
  min-width: 700px;
  background-color: rgba(34, 34, 34, .75);
}
ul.nav {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
  width: 100%;
}
ul.nav li {
  background-color: transparent;
  display: table;
  float: left;
  height: 50px;
  width: 12.5%;
  text-align: center;
}
ul.nav li:last-child {
  float:right;  
}
ul.nav li marquee {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  font-family: fantasy;
}
ul.nav li a {
  text-decoration: none;
  text-transform: capitalize;
  font-family: fantasy;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  color: lightgray;
  font-weight: bold;
}
ul.nav li:hover {
  background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
  background-color: black;
  color: lightgreen;
}
ul.nav li:hover a {
  color: black;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Kendall's Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
  <div class="main_container">
    <div class="nav_container">
      <ul class="nav">
        <li>
          <a href="#">home</a>
        </li>
        <li>
          <a href="#">kendall</a>
        </li>
        <li>
          <a href="#">projects</a>
        </li>
        <li>
          <a href="#">social</a>
        </li>
        <li>
          <a href="#">tutorials</a>
        </li>
        <li>
          <marquee scrollamount="2">
            some sliding text
          </marquee>
        </li>
        <li>
          <a href="#">login</a>
        </li>
        <li>
          <a href="#">sign up</a>
        </li>
      </ul>
      <!--Closing of the nav-->
    </div>
    <!--Closing of the nav_container-->
  </div>
  <!--Closing of the main_container-->
</body>

</html>

为什么我的导航相对于浏览器的宽度不是 100%

Why won't my nav be 100% in width relative to the browser

html

css

html-lists

nav

fluid-layout