gpt4 book ai didi

html - 如何使用 HTML 和 CSS 在页面的整个宽度上放置一个菜单?

转载 作者:太空狗 更新时间:2023-10-29 16:05:20 24 4
gpt4 key购买 nike

我刚刚开始使用网络语言(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>

最佳答案

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

关于html - 如何使用 HTML 和 CSS 在页面的整个宽度上放置一个菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37436715/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com