Question

为什么我的ul li一直延伸到屏幕右侧？它似乎不是100％..请帮助在提供的示例中。导航栏在某些特定大小调整时并未完全延伸到屏幕上;我扩展浏览器的窗口越多，来自UL的最后一个LI子节点与浏览器边界右侧之间的间隙越大。当你悬停时你可以看到它。 “注册”项目...请帮忙......

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: 50px;
  width: 100%;
}
ul.nav li {
  background-color: transparent;
  display: table;
  float: left;
  height: 50px;
  width: 14.285714286%;
  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;
}

<div class="main_container">
  <div class="nav_container">
    <ul class="nav">
      <li>
        <a href="#">home</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>
  </div>
</div>

Answer 1

只需添加

min-width with percentage like min-width:99.8% and min-width:14.2%

或者其他什么，它会限制浏览器保持指定宽度的最小值

css菜单左对齐不会有100％的宽度

1 个答案: