首页 文章

在nowrap文本之后ul不会增加宽度

提问于
浏览 次
0

我正在尝试创建一个子菜单但是当li有white-space：nowrap时，ul宽度会忽略它并导致文本溢出 . （ul宽度不会增加以包装文本）
有人知道解决这个问题的方法吗？

编辑 . 如果我将显示属性更改为可见性，它似乎可以解决Chrome上的问题，但它仍然存在，即 .

** jsFiddle **

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;
}
css width whitespace shrink nowrap

1 回答

  • 1

    这是你的填充问题：

    http://jsfiddle.net/MaRF5/6/

    尝试这样做：

    #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;
}
    回复于

相关问题