Question

到目前为止，我看了几个与此问题非常相似的问题，但仍无法找到问题的答案。（请注意，我是HTML新手，这是我的第一篇文章）。

我希望有一个横跨页面宽度的导航栏，无论正在查看的屏幕宽度如何。我尝试将宽度设为100％，但它仍然没有做任何事情。

导航栏的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>

nav {
    width: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a {
    display: block;
    width: 60px;
    background-color: #dddddd;
    border-color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    margin: 3px;
    border-radius: 4px;
}

a:hover {
    font-weight: bold;
    background-color: #9b9b9b;
}

a:active {
    color: #ff0000;
} 

</style>
</head>
<body>
<nav>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</nav>
</body>
</html>

你能帮我找到一种让导航栏跨越页面宽度的方法吗？

谢谢！

Answer 1

如果您想将li扩展为相同的尺寸并填充ul的宽度，flexbox可以做到这一点。

现代浏览器 - Flexbox

＆＃13;

nav {
    width: 100%;
    background: #333;
  margin-bottom: 1em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
display: flex;
}

li {
    flex:1 0 auto;
}

a {
    display: block;
    /*width: 60px;*/
    background-color: #dddddd;
    border-color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding:10px 0;
    margin: 3px;
    border-radius: 4px;
}

a:hover {
    font-weight: bold;
    background-color: #9b9b9b;
}

a:active {
    color: #ff0000;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</nav>


<nav>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</nav>

＆＃13;

替代解决方案：旧浏览器 - CSS表格

＆＃13;

nav {
  width: 100%;
  background: #333;
  margin-bottom: 1em;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: table;
  width: 100%;
  table-layout: fixed;
}
li {
  display: table-cell;
}
a {
  display: block;
  /*width: 60px;*/
  background-color: #dddddd;
  border-color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  margin: 3px;
  border-radius: 4px;
}
a:hover {
  font-weight: bold;
  background-color: #9b9b9b;
}
a:active {
  color: #ff0000;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</nav>


<nav>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

您的导航宽度为100％。现在尝试在CSS中为LI元素添加一个宽度，以便在导航的100％宽度上均匀分布它们。

li {
    float: left;
    width:25%;
}

Answer 3

导航已经是100％宽度，使用此css配置。给它一些背景，你将能够看到它。

Answer 4

如此正确，导航栏横跨页面的宽度，但内部的对象不够大，无法填补空白。如果您向导航栏添加背景颜色，则可以看到此信息。您可以考虑的是将导航栏中的对象居中对齐或将每个对象的宽度扩展到接近25％

Answer 5

您是否尝试将nav标记从窗口边缘展开到窗口边缘？

如果是这样，您将要删除身体上的边距：

body {
    margin: 0;
}

如何让导航栏跨越页面宽度？

5 个答案: