Jsfiddle 作为, https://jsfiddle.net/9qyv03u3/
如何将 li
标题字符串分成两行,以便它们适合最大宽度?
在 jsfiddle 中,菜单项放置在一行中,但在 firefox 中我的 50% 宽度容器中,它呈现为,
这将导致用户按下错误的菜单选项。所以,我更喜欢水平放置的所有菜单选项,例如,
Save & Run | Run saved | Run selected |
suite | suite | tests |
最佳答案
你可以通过使 ul
成为 flexbox 来做到这一点:
ul {
display: flex;
}
ul {
display: flex;
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
... 或者让每个 li
成为一个 table-cell
:
li {
display: table-cell;
}
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: none;
font: 14px verdana;
}
li {
display: table-cell;
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
text-align: center;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>
关于html - 在两行中显示 li 元素标题,以适应最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31710292/