如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？
Posted
技术标签:
【中文标题】如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？【英文标题】：How to put a menu over the full width of the page using HTML and CSS? 【发布时间】：2016-09-23 00:47:34 【问题描述】：我刚开始使用网络语言（html、CSS），我正在创建我的第一个页面。我找到了一个模板 html 水平菜单，我想将其应用于我的页面。不幸的是，我没有来修改它，因为他适用于我页面的所有宽度。
我在网上摸索着想知道怎么做，我认为它应该与width = 100%的属性相关联。
我认为解决方案应该很简单，但即使观看 *** 关于类似问题的帖子我也没有发现。当我应用在我的代码中找到的解决方案时，它不起作用。
代码如下：
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>【问题讨论】：
【参考方案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 不是。以上是关于如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？的主要内容，如果未能解决你的问题，请参考以下文章
一旦我使用CSS和HTML设计了导航栏 - 如何将HTML代码放在一个位置，以便在每个窗口中显示？ [重复]