Блог

Главная - Вопросы по программированию - Как сделать так, чтобы с элементами блока располагались рядом друг с другом?

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

#html #css

Вопрос:

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

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

Комментарии:

1. встроенный блок-это определенно правильный путь, если он работает в системах, на которые вы нацелены.

2. встроенный блок, безусловно, поддерживается как IE 6, так и 7… на встроенных элементах.

3. Однако он не поддерживается Firefox

Ответ №2:

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

Комментарии:

1. @CharlesPrakashDasari, более старые версии IE (6 и 7) не поддерживают inline-block элементы, для которых по умолчанию block установлено значение . Но inline плюс проприетарное hasLayout состояние IE идентично inline-block . * Префикс нацелен на ошибку синтаксического анализа CSS в этих старых версиях IE, изолируя эти стили. zoom: 1 срабатывает hasLayout без каких-либо побочных эффектов.

Ответ №3:

В своем <UL> теге используйте атрибут css «стиль списка:нет», а в <li> теге используйте атрибут css «отображение:встроенное». Вам придется поиграть с заполнением и полями, чтобы он выглядел хорошо, но эти два атрибута помогут вам в вашем пути. Для лучшего примера смотрите мой некоммерческий веб-сайт: Техническое обучение

Ответ №4:

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

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

Комментарии:

1. есть способы справиться с этим без взлома, поэтому я бы не советовал этого делать.

Ответ №5:

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

Ответ №6:

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

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

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

Комментарии:

1. IE также имеет историю проблем с :после псевдоэлементов.

Ответ №7:

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

Ответ №8:

Простой поплавок: слева будет работать (с небольшой регулировкой ширины)

 li {
    margin: .5em 1em;
    padding: .1em;

    font-family: sans-serif;
    list-style-type: none;
    border: 1px #666 solid;
    float: left;
}
#layout-section {
    width: 85%;
}
Метки: ,