gpt4 book ai didi

html - 下拉菜单未显示全文且文本未对齐

转载 作者:行者123 更新时间:2023-11-28 13:41:56 25 4
gpt4 key购买 nike

目前,我在子菜单中添加主题、删除主题、删除主题、手动抓取不是集中的,即使我在#menu li li a 中将其指定为文本对齐居中。子菜单的执行摘要也被截断了。我可以知道如何扩展子菜单并集中所有文本吗?谢谢!

这是我的代码(我真的很抱歉,因为我没有 jsfiddle 帐户并且在等候名单上):

HTML

<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#">Add Subject</a></li>
<li><a href="#">Delete Subject</a></li>
<li><a href="#"> Edit Subject</a></li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>

CSS

 #menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}

#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}

#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}

#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}

#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}

#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}

#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}

#menu li li a:hover{
background: rgba(255,255,255,0.5);
}

最佳答案

    #menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}

#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}

#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}

#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}

#menu ul ul {
display: none;
width: 11em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}

#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}

#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 0px;
color: #fff;
text-align: center;
}

#menu li li a:hover{
background: rgba(255,255,255,0.5);
}

关于html - 下拉菜单未显示全文且文本未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12293332/

25 4 0