我正在尝试创建一个子菜单,但是当 li 有 white-space:nowrap 时,ul 宽度会忽略它并导致文本溢出。 (ul宽度不增加包裹文字)
有人知道解决这个问题的方法吗?
编辑。如果我将显示属性更改为可见性,它似乎可以解决 Chrome 上的问题,但它仍然存在于 ie 上。
HTML
<ul id="menubar">
<li>File
<ul class="submenu">
<li>Save as file</li>
<li>Save as file2</li>
<hr />
<li>Save simple design</li>
<li>Save complete design</li>
</ul>
</li>
</ul>
CSS
html,body{height:100%;width:100%;margin:0;padding:0;}
#menubar {
background: gray;
height:15%;
margin:0;
padding:0;
width:100%;
}
#menubar > li {
height:100%;
float:left;
padding:0 2% !important;
display: inline-flex;
align-items: center;
}
#menubar li:hover {
background-color:#7faddb;
}
#menubar li:hover ul.submenu {
display:block;
}
#menubar ul.submenu {
z-index:99;
border:1px solid black;
background-color:white;
padding:.3%;
position: absolute;
display:none;
}
#menubar ul.submenu li {
list-style-type: none;
font-size:110%;
padding:0 5%;
white-space:nowrap;
}
最佳答案
你的填充有问题:
尝试这样做:
#menubar ul.submenu {
z-index:99;
border:1px solid black;
background-color:white;
padding:.3%;
position:absolute;
}
#menubar ul.submenu li {
list-style-type: none;
font-size:110%;
padding:10px;
}
关于css - ul 在 nowrap 文本后不增加宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19552545/