Как мне сделать так, чтобы <li> с блочными элементами располагались рядом друг с другом?
У меня есть макет для чего-то здесь. По сути, это разделы, столбцы и поля, которые записаны как комбинация элементов <ul> и <li>. Это сделано специально для последующего анализа.
Фрагмент HTML:
<li class = "layout"><span class = "type">[Column] </span>
<ul class = "layout-children">
<li class = "field"><span class = "type">[Text] </span>A field</li>
<li class = "field"><span class = "type">[Text] </span>Another field</li>
<li class = "field"><span class = "type">[Text] </span>Yet another field</li>
</ul>
</li>
<li class = "layout"><span class = "type">[Column] </span>
<ul class = "layout-children">
<li class = "field"><span class = "type">[Text] </span>More fields</li>
<li class = "field"><span class = "type">[Text] </span>And one more field</li>
</ul>
</li>
Если вы перейдете к связанный контент, вы заметите, что эти столбцы расположены вертикально. Я хочу, чтобы столбцы располагались рядом друг с другом, но я не знаю, как это сделать.
Было бы предпочтительнее, если бы HTML не менялся, а только CSS.
Ответы 8
В теге <UL> используйте атрибут css "list-style: none;" а в теге <li> используйте атрибут css "display: inline;" вам придется поэкспериментировать с отступом и полем, чтобы он выглядел хорошо, но эти два атрибута помогут вам. Лучший пример см. На моем некоммерческом веб-сайте: Техническое обучение
Как насчет этого:
.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }
да, используя display:block, было бы невозможно заставить их сидеть рядом друг с другом, если вы не попытаетесь указать ширину для каждого из них
но если это так, просто используйте display:inline
Я только что добавил это в ваш css:
ul .section-children li.layout {
display : inline-block;
}
К сожалению, я не знаю, насколько хорошо сейчас поддерживается встроенный блок.
inline-block определенно подходит, если он работает в системах, на которые вы нацеливаетесь.
inline-block, безусловно, поддерживается как IE 6, так и 7 ... на встроенных элементах.
Однако он не поддерживается Firefox <3. Вот почему мой ответ включал -moz-inline-box.
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
@CharlesPrakashDasari, более старые версии IE (6 и 7) не поддерживают inline-block для элементов, для которых по умолчанию используется block. Но состояние inlinehasLayout плюс IE идентично inline-block. Префикс * нацелен на ошибку синтаксического анализа CSS в этих старых версиях IE, изолируя эти стили. zoom: 1 запускает hasLayout без каких-либо побочных эффектов.
Просто альтернатива использованию встроенных элементов, поскольку в IE были проблемы с заполнением встроенных элементов:
.layout-children:after
{
content: "";
display: block;
height: 0px;
clear: both;
}
.layout-children .field
{
float: left;
}
IE также имеет проблемы с псевдоэлементами: after.
Использование inline или inline-block не принесет ничего, кроме неприятностей. Гораздо лучше использовать числа с плавающей запятой, как предложил @Dmitry Z (но без взлома полей, в котором нет необходимости).
Подойдет простой поплавок: left (с небольшой поправкой на ширину)
li {
margin: .5em 1em;
padding: .1em;
font-family: sans-serif;
list-style-type: none;
border: 1px #666 solid;
float: left;
}
#layout-section {
width: 85%;
}
есть способы справиться с этим без взлома, поэтому я бы не предлагал этого.