我刚刚用网络语言(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（#navID）显示为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>| 归档时间： |
|
| 查看次数： |
411 次 |
| 最近记录： |