Отобразить заголовок элемента li в две строки, чтобы соответствовать максимальной ширине
Jsfiddle as, https://jsfiddle.net/9qyv03u3/
Как я могу сломать li
заголовок строки в две строки, чтобы они вписались в максимальную ширину?
В jsfiddle пункты меню помещаются в одну строку, но внутри моего контейнера 50% ширины в Firefox он отображается как:
Это приведет к тому, что пользователь нажмет неправильную опцию меню. Итак, я предпочитаю все пункты меню, расположенные горизонтально, как,
Save & Run | Run saved | Run selected |
suite | suite | tests |
4 ответа
Вы можете отобразить элементы списка как ячейки таблицы. Возможно, вам придется немного подправить поля и отступы, но таким образом элементы всегда будут рядом друг с другом.
ul{
display: table;
width: 20em;
border: 4px solid gray;
margin: 5em auto;
padding: 20px 0 0 0;
list-style: None;
height: 30px;
}
li {
display: table-cell;
border-right-style: dotted;
padding-right : 15px;
}
<ul>
<li>Questions</li>
<li>Tags liek bla blo foo bar bak nam plo and sni</li>
<li>Users</li>
</ul>
Вы можете сделать это, сделав 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>
CSS таблицы я бы предложил.
ul {
width: 20em;
border: 4px solid gray;
padding: 0.5em 2em;
margin: 5em auto;
list-style: None;
height: 30px;
display: table;
table-layout: fixed;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
border-right: 1px dotted black;
}
<ul>
<li>Questions & Answers</li>
<li>Tags</li>
<li>Users</li>
</ul>
Вы также можете использовать column-count
свойство определять CSS столбцы. Это быстрый и простой способ достижения желаемого эффекта.
ul {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
width: 25em;
border: 4px solid gray;
padding: 1.5em;
margin: 5em auto;
list-style: None;
font-size: 12pt;
font-family: Arial, sans-serif;
}
li {
text-align: center;
border-right-style: dotted;
padding-right: 10px;
}
li:last-child {
border: 0;
}
<ul>
<li>Save & Run suite</li>
<li>Run saved suite</li>
<li>Run selected tests</li>
</ul>