Как сделать так, чтобы <li>с блочными элементами сидели рядом друг с другом?

Question

У меня есть макет для чего-то здесь . По сути, есть разделы, столбцы и поля, которые записаны в виде комбинации элементов <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.

Answer 1

display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;

Answer 2

Я только что добавил это к вашему CSS:

ul .section-children li.layout {
    display : inline-block;
}

К сожалению, я не знаю, насколько хорошо поддерживается встроенный блок в настоящее время.

Answer 3

В вашем теге <UL> используйте атрибут css "list-style: none;" а в теге <li> используйте атрибут css "display: inline;" вам придется поэкспериментировать с отступами и полями, чтобы они хорошо выглядели, но эти два атрибута помогут вам в этом. Для лучшего примера посмотрите мой некоммерческий веб-сайт: Технически обучения

Answer 4

Простой float: 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%;
}

Answer 5

Использование inline или inline-block будет только проблемой. Лучше использовать поплавки, как предложил @Dmitry Z (но без взлома поля, в котором нет необходимости).

Answer 6

Просто альтернатива использованию встроенных элементов, так как IE имел историю проблем с заполнением со встроенными:

.layout-children:after
{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}

.layout-children .field
{
  float: left;
}

Answer 7

да, используя display:block, было бы невозможно заставить их сидеть рядом друг с другом, если только вы не попытаетесь указать ширину для каждого из них но если это так, просто используйте display:inline

Answer 8

Как насчет этого:

.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }