如何使用 HTML 和 CSS 将菜单放置在整个页面宽度上?
How to put a menu over the full width of the page using HTML and CSS?
我刚刚开始使用网络语言 (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>
如果您希望菜单占页面宽度的 100%,我相信您应该添加这个。
#nav
{
padding:0;
width: 100%;
float:left;
background-color: #333333;
}
background-color: #333333 - 添加只是为了让它更显眼。
我建议您学习和使用 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>
您可以将您的 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>
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 已评论更改。
尝试将菜单列表放入 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),并且正在创建我的首页。我找到了一个模板 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>
如果您希望菜单占页面宽度的 100%,我相信您应该添加这个。
#nav
{
padding:0;
width: 100%;
float:left;
background-color: #333333;
}
background-color: #333333 - 添加只是为了让它更显眼。
我建议您学习和使用 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>
您可以将您的 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>
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 已评论更改。
尝试将菜单列表放入 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>