我刚刚用网络语言(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;
}Meta charset="utf-8" />
最佳答案
您可以将ul(#nav ID)显示为内联块,然后设置宽度：100％.此外,您应添加背景颜色以查看效果.
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;
}Meta charset="utf-8" />
