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

发布时间：2020-12-14 22:36:49 所属栏目：资源来源：网络整理

导读：我刚刚用网络语言(HTML,CSS)推出,我正在创建我的第一页.我找到了一个模板html水平菜单,我想要应用到我的页面.不幸的是,我没有到达修改它,因为他适用于我的页面的所有宽度. 我探索网络试图找到如何做,我认为它应该与属性width = 100％链接. 我认为解决方案应

我刚刚用网络语言(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;
}


最佳答案
您可以将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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!