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

Question

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

我在网上摸索着如何做，我认为它应该与属性 width = 100%。

我认为解决方案应该很容易，但即使查看 Whosebug post 我也没有发现类似的问题。当我应用在我的代码中找到的解决方案时，它不起作用。

代码如下：

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>

Answer 1

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

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

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

Answer 2

我建议您学习和使用 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>

Answer 3

您可以将您的 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>

Answer 4

 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 已评论更改。

Answer 5

尝试将菜单列表放入 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>

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

How to put a menu over the full width of the page using HTML and CSS?

html

css

menu

nav

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