Как сделать <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.

Ответ 1

Я просто добавил это в ваш css:

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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