Я хочу отобразить этот список в одной строке.
- Элемент списка1
- Элемент списка2
Должен отображаться как
* Элемент списка2 * Элемент списка2
Какой стиль CSS использовать?
Я хочу отобразить этот список в одной строке.
Должен отображаться как
* Элемент списка2 * Элемент списка2
Какой стиль CSS использовать?
ul li{
display: inline;
}
Подробнее см. основные параметры списка и базовый горизонтальный список в списке. (спасибо Daniel Straight ниже для ссылок).
Кроме того, как указано в комментариях, вы, вероятно, хотите, чтобы стиль на ul и все элементы вошли внутрь li и сами li, чтобы все выглядело хорошо.
Код HTML:
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Код CSS:
ul.list li{
width: auto;
float: left;
}
В современных браузерах вы можете сделать следующее (совместимый с CSS3)
ul
{
display:flex;
list-style:none;
}
<ul>
<li><a href="">Item1</a></li>
<li><a href="">Item2</a></li>
<li><a href="">Item3</a></li>
</ul>
Попробуйте поэкспериментировать с этим:
HTML
<ul class="inlineList">
<li>She</li>
<li>Needs</li>
<li>More Padding, Captain!</li>
</ul>
CSS
.inlineList {
display: flex;
flex-direction: row;
/* Below sets up your display method: flex-start|flex-end|space-between|space-around */
justify-content: flex-start;
/* Below removes bullets and cleans white-space */
list-style: none;
padding: 0;
/* Bonus: forces no word-wrap */
white-space: nowrap;
}
/* Here, I got you started.
li {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
}
*/
Я сделал код, чтобы проиллюстрировать: http://codepen.io/agm1984/pen/mOxaEM
Любая причина, отображающая: inline не работает? У меня есть стиль для работы, и я не начинающий, но дисплей: inline ничего не делает, когда что-то делает что-то. Я даже удалил все остальное, чтобы быть уверенным, что ничто не повлияло на него, но что бы ни случилось, не работает...
Собственно, джентльмен, вышедший с дисплеем: flex был тем, что сработало... Это странно...