如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？答案

【问题标题】：How to put a menu over the full width of the page using HTML and CSS?如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？
【发布时间】：2016-09-23 00:47:34
【问题描述】：

我刚开始使用网络语言（HTML、CSS），我正在创建我的第一个页面。我找到了一个模板 html 水平菜单，我想将其应用于我的页面。不幸的是，我没有来修改它，因为他适用于我页面的所有宽度。

我在网上摸索着想知道怎么做，我认为它应该与width = 100%的属性相关联。

我认为解决方案应该很简单，但即使观看 StackOverflow 关于类似问题的帖子我也没有发现。当我应用在我的代码中找到的解决方案时，它不起作用。

代码如下：

body
{
 background-color: black; /* Le fond de la page sera noir */
}

#nav
{
padding:0;
}

#nav li
{
display:inline;
}

#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

<html>
<head>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
   
	<ul id="nav" style="clear:both;">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="#">Help</a></li>
			<li><a href="#">Contact Us</a></li>
	</ul>
</body>
</html>

【问题讨论】：

标签： html css menu nav

【解决方案1】：

您可以将您的ul（#nav ID）显示为inline-block，然后设置width: 100%. 此外，您应该添加background-color 以查看效果。

body
{
 background-color: black; /* Le fond de la page sera noir */
}

#nav
{
padding:0;
display: inline-block;
width: 100%;
background-color: #333333;
}

#nav li
{
display:inline;
}

#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

<html>
<head>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>
   
	<ul id="nav" style="clear:both;">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Sitemap</a></li>
			<li><a href="#">Help</a></li>
			<li><a href="#">Contact Us</a></li>
	</ul>
</body>
</html>

【讨论】：

效果很好，也感谢您的回复速度和质量。

【解决方案2】：

如果您希望菜单占页面宽度的 100%，我相信您应该添加此内容。

#nav
{
padding:0;
width: 100%;
float:left;
background-color: #333333;
}

background-color: #333333 - 添加只是为了让它更明显。

【讨论】：

非常感谢您的回复速度和质量。

【解决方案3】：

 body {
   background-color: white;
   /* Le fond de la page sera noir */
 }
 #nav {
   /* reset unordered list to not use default list styles */
   list-style: none;
   padding: 0;
   margin: 0;
   /* add display flex with space around and vertical centering...also stop wrap */
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: no-wrap;
   /* color needed on background also to look consistent */
   background-color: #333333;
 }
 #nav li a {
   font-family: Arial;
   font-size: 12px;
   text-decoration: none;
   float: left;
   padding: 10px;
   color: #ffffff;
   border-bottom: 2px;
   border-bottom-color: transparent;
   border-bottom-style: solid;
 }
 #nav li a:hover {
   /* avoid changing size or position of things on hover...this can cause content to jump */
   background-color: #9B1C26;
   border-bottom-color: #000000;
 }

<ul id="nav" style="clear:both;">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Services</a>
  </li>
  <li><a href="#">Products</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Help</a>
  </li>
  <li><a href="#">Contact Us</a>
  </li>
</ul>

这只是您可以做的一个示例，当然不是黄金标准，但会让您思考各种可能性。希望这可以帮助。对 CSS 进行了评论并进行了更改。

【讨论】：

谢谢你，你帮助我完成了我接下来想做的事情。

【解决方案4】：

尝试将菜单列表放入这样的 DIV 中：

body
{
 background-color: black; /* Le fond de la page sera noir */
}
#navdiv
{
	padding 0;
	background-color: #333333;
	width: 100vw;
	height: 34px;
}
#navul
{
padding:0;
width: 100vW;
}

#navul li
{
display:inline;
}

#navul li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}

#navul li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
</head>
<body>

    <div id="navdiv">
	<ul id="navul" style="clear:both;">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Contact Us</a></li>
    </ul>
	</div>
</body>
</html>

【讨论】：

【解决方案5】：

我建议您学习和使用 bootstrap，因为它让这一切变得简单。在您的情况下，这非常简单，您将在 navbar 之外创建 2 个 <div> 元素。一个来设置宽度 100% 并应用您的背景，然后另一个来使您的代码居中。

我对你的问题的回答：

<style>
.full_width{
    width: 100%;
}
.centerlize{
    width:1024px;
    margin: 20px auto;
}
</style>
<body>
    <div class="full_width">
        <div class="centerlize">
            <ul id="nav" style="clear:both;">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>

【讨论】：

不要建议学习编写 HTML 和 CSS 代码的人使用 Bootstrap - 这只会限制他们的学习。将它用于生产取决于您，用它来学习 HTML 和 CSS 不是。