Содержание

CSS: как сделать горизонтальный (UL) список, сохраняя каждый элемент одинаковой ширины?



То есть без определения конкретной суммы ‘width’ для каждого отдельного элемента. Например, самый широкий элемент (по своему содержанию) задает ширину для каждого из других элементов.

Кроме того, как я могу охватить указанный список 100% по всему его контейнеру, также сохраняя каждый элемент одинаковой ширины?

css list width
Поделиться Источник Hamster     15 августа 2010 в 14:53

3 ответа


  • Оберните каждый элемент в горизонтальный список с помощью CSS

    У меня есть горизонтальный список с длинными элементами,которые я хочу обернуть. Список прекрасно оборачивается, если один элемент списка действительно длинный или если все элементы списка действительно короткие. Однако если два элемента списка имеют длину, они не будут разделены по доступному…

  • Горизонтальный (встроенный) список в HTML/CSS с divs

    Я пытаюсь построить простой горизонтальный список, где каждый элемент списка является div, и я хочу, чтобы все они сидели рядом друг с другом. Однако когда я пытаюсь использовать приведенный ниже код, дивы оказываются на отдельных строках. Вот что у меня есть: HTML: <ul id=navlist>…



2

Если я правильно понимаю:

  1. Вам нужен список.
  2. Вы хотите, чтобы каждый элемент списка был одинаковой ширины.
  3. Вы хотите, чтобы эта ширина была шириной самого широкого содержимого элемента списка

  4. Вам также нужен способ равномерно распределить элементы списка по контейнеру, это кажется несовместимым с 3, потому что тогда они будут равномерно распределены не по содержимому, а по размеру контейнера.

Поэтому я предполагаю, что вам нужны два разных решения.

Я думаю, что вы можете сделать

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

работает в некоторых браузерах. Кажется, я помню, что он не работал в IE и должен был заставить его работать, используя выражения css.

Идея заключается в том, что ul и li плавают, чтобы сжать их до ширины содержимого. Li очищаются и устанавливаются на 100% ширины их контейнера, того же самого контейнера, который сжимается до их размера. —

Ваш другой вариант невозможен в CSS, если вы не знаете количество элементов списка. Хотя если вы не знаете количество элементов списка, это означает, что существует сценарий, идущий либо на стороне сервера, либо на стороне клиента, и вы можете узнать количество элементов. 🙂

Я решил эту проблему в прошлом, дав ul класс с количеством детей в нем, используя множество правил CSS и надеясь, что один из них будет придерживаться.

напр.

<style>
  ul.lis1 li {width:100%}
  ul.lis2 li {width:50%}
  ul.lis3 li {width:33.3%}
  ul.lis4 li {width:25%}
  /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */
</style>
<ul> <!-- lis4 is generated by PHP or Ruby or whatever -->
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Поделиться robotdana     16 августа 2010 в 02:09



1

Используйте css таблицы с фиксированным расположением таблиц.

В результате каждый <li> будет делить равную часть <ul> независимо от того, сколько элементов есть в списке.

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-cell;
    border-right: 1px solid #c2c2c2;
}

Пример FIDDLE

Поделиться Danield     02 сентября 2013 в 08:31



0

Для этого вам нужно будет их сплавить:

ul {
  list-style: none;
}

ul li {
  float: left;
  width: 100px; /* Or whatever arbitrary amount you want */
}

Список должен автоматически охватывать ширину контейнера-его блочный элемент.

Поделиться Yi Jiang     15 августа 2010 в 15:02



Похожие вопросы:


Горизонтальный список пунктов меню Force width (CSS)

Как я могу заставить все элементы в горизонтальном списке (меню) быть одинаковой ширины? Это мой код CSS до сих пор: a { text-decoration:none; } #navlist ul { margin:0; padding:0;…


Горизонтальный список (ul) с многострочным элементом списка?

У меня есть горизонтальный список (для навигационной панели), и я хочу, чтобы отдельный элемент списка был многолинейным. Я попытался использовать <br /> , но это приводит к тому, что весь…


Создание разных li (родительского и дочернего) одинаковой ширины

Я создаю горизонтальную навигационную панель ul . Каждый элемент li имеет разную ширину. Я хочу сделать так, чтобы в выпадающем меню выпадающие элементы «children» li стали такой же…


Оберните каждый элемент в горизонтальный список с помощью CSS

У меня есть горизонтальный список с длинными элементами,которые я хочу обернуть. Список прекрасно оборачивается, если один элемент списка действительно длинный или если все элементы списка…


Горизонтальный (встроенный) список в HTML/CSS с divs

Я пытаюсь построить простой горизонтальный список, где каждый элемент списка является div, и я хочу, чтобы все они сидели рядом друг с другом. Однако когда я пытаюсь использовать приведенный ниже…


Горизонтальный ползунок каждый элемент занимает 100% окна

Я хочу сделать горизонтальный ползунок, каждый элемент которого занимает 100% окна. Я не хочу указывать ширину контейнера с помощью CSS, так как они должны быть динамическими. <div…


Python PIL каждый символ одинаковой ширины

Я пытаюсь нарисовать какой-то текст на картинке, используя пакет PIL с python. Есть ли способ, которым я могу нарисовать каждый символ одинаковой ширины? Спасибо!


Как я могу сделать элемент списка с одинаковой длиной?

Я создаю неупорядоченный список для компонента горизонтальной вкладки. Я хочу, чтобы каждый элемент списка заполнял одну из трех коробок с одинаковой длиной и высотой, показанных на изображении. Вот…


создать горизонтальный список в css

я хочу поместить 3 ящика в горизонтальный список. Код, который я использовал, таков <div class=rowtitle> <ul> <li style=display: inline;> <div class=service-wrapper1> <a…


Как сделать все элементы одинаковой ширины в оберточной flexbox?

У меня есть список элементов переменной ширины внутри оберточной коробки flex . Я хочу, чтобы все элементы имели одинаковую ширину, поэтому я применил следующие атрибуты CSS: flex-basis: 0 и…

Как сделать отображение в горизонтальном ряду



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

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}
<div>
    <ul>
        <li>&#8227; <a href=""> Inbox</a></li>
        <li>&#8227; <a href=""> Compose</a></li>
        <li>&#8227; <a href=""> Reports</a></li>
        <li>&#8227; <a href=""> Preferences</a></li>
        <li>&#8227; <a href=""> logout</a></li>
    </ul>
</div>
html css html-lists
Поделиться Источник Babiker     20 мая 2009 в 00:36

7 ответов


  • Как сделать разрыв строки в горизонтальном списке ul для каждого списка x?

    У меня есть горизонтальный динамический список ul , построенный по PHP, как это: List1 List2 List3 List4 List5 List6 List7 List8 List9 List10 Есть ли способ сделать новую строку каждые 3 списка? Итак, результат будет выглядеть так: List1 List2 List3 List4 List5 List6 List7 List8 List9 List10 Я…

  • Как показать 3 <li> в одном ряду

    Мне нужно показать 3 изображения в каждой строке в теге <ul>. У меня есть несколько тегов <ul>, и в каждом теге <ul> я показываю 6 изображений. Теперь я должен показать 3 <li> в первом ряду и следующие 3 <li> во втором ряду. Тогда же для следующего <ul>. мне…



132

Элементы списка обычно являются блочными элементами. Превратите их в встроенные элементы с помощью свойства display .

В коде, который вы дали, вам нужно использовать контекстный селектор, чтобы свойство display: inline применялось к элементам списка, а не к самому списку (применение display: inline к общему списку не будет иметь никакого эффекта):

#ul_top_hypers li {
    display: inline;
}

Вот рабочий пример:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}
<div>
    <ul>
        <li>&#8227; <a href=""> Inbox</a></li>
        <li>&#8227; <a href=""> Compose</a></li>
        <li>&#8227; <a href=""> Reports</a></li>
        <li>&#8227; <a href=""> Preferences</a></li>
        <li>&#8227; <a href=""> logout</a></li>
    </ul>
</div>

Поделиться hbw     20 мая 2009 в 00:37



17

Вы также можете установить их так, чтобы они плыли вправо.

#ul_top_hypers li {
    float: right;
}

Это позволяет им по-прежнему находиться на уровне блока, но появляться на одной и той же линии.

Поделиться alex     20 мая 2009 в 01:01



11

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

Поделиться Paul Morie     20 мая 2009 в 00:40




8

Как сказал @alex, вы можете плыть прямо, но если вы хотите сохранить markup таким же, плывите влево!

#ul_top_hypers li {
    float: left;
}

Поделиться tjhorner

    18 июня 2013 в 14:41



7

Это будет работать для вас:

#ul_top_hypers li {
    display: inline-block;
}

Поделиться vikram mohod     21 октября 2016 в 12:11



4

Как уже упоминалось, вы можете установить li на display:inline; или float на li влево или вправо. Кроме того, вы также можете использовать display:flex; на ul . В приведенном ниже фрагменте я также добавил justify-content:space-around , чтобы дать ему больше интервалов.

Для получения дополнительной информации о flexbox ознакомьтесь с этим полным руководством .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}
<div>
    <ul>
        <li>&#8227; <a href=""> Inbox</a></li>
        <li>&#8227; <a href=""> Compose</a></li>
        <li>&#8227; <a href=""> Reports</a></li>
        <li>&#8227; <a href=""> Preferences</a></li>
        <li>&#8227; <a href=""> logout</a></li>
    </ul>
</div>

Поделиться Matthew Johnson     02 сентября 2016 в 19:23



3

#ul_top_hypers li {
  display: flex;
}

Поделиться Kumar Saket     14 июня 2017 в 05:42


Похожие вопросы:


Отображение данных массива в горизонтальном порядке с использованием php и smarty

Предложи мне лучший способ сделать это. Я хотел бы показать результат массива в горизонтальном порядке. Столбец1 | 2 | Столбец 3 3 | 7 | 10 теперь он показывает в вертикальном порядке следующее…


Вертикальный <ul> в горизонтальном <li>

Я хочу разделить экран на три столбца с помощью тега ul , и я хочу иметь нормальный (вертикальный) список внутри первого столбца. Я пробовал это сделать, но это не работает: <ul…


как сохранить ссылки меню в горизонтальном положении

Я сыт по горло попытками держать меню (Дом, фотографии, картины) в горизонтальном положении. Эти ссылки идут по вертикали, как сначала дом, потом фотографии, потом картины. Я не хочу, чтобы они были…


Как сделать разрыв строки в горизонтальном списке ul для каждого списка x?

У меня есть горизонтальный динамический список ul , построенный по PHP, как это: List1 List2 List3 List4 List5 List6 List7 List8 List9 List10 Есть ли способ сделать новую строку каждые 3 списка?…


Как показать 3 <li> в одном ряду

Мне нужно показать 3 изображения в каждой строке в теге <ul>. У меня есть несколько тегов <ul>, и в каждом теге <ul> я показываю 6 изображений. Теперь я должен показать 3…


Поплавок subnav UL в горизонтальном центре родительского LI

У меня есть первичная навигационная система, которая имеет дочернюю вложенную ULs внутри родительской UL — например, см. Пример кода ниже. <ul> <li>1st level button 1</li>…


стиль списка не отображается в горизонтальном списке

У меня есть горизонтальный список в моем markup со следующим CSS: ul li { display: inline; list-style: circle; list-style-type: circle; } Когда я удаляю display: inline; , он работает нормально. Но…


Совместить все элементы в одном горизонтальном ряду в Twitter начальной загрузки навигации

Я сталкиваюсь с проблемами, когда все 3 компонента Bootstrap-based navbar находятся в одном горизонтальном ряду. Эта навигационная панель имеет плавную ширину . Вопрос: как мы можем настроить код,…


Как сделать две кнопки в одном ряду?

Я создаю две кнопки, а затем прикрепляю их к одному и тому же do=iv с id=dvSearchTitle. Вот код: var button = $(‘<button/>’, { text: data.d.txtSearch, id: ‘btnFeatureLocation’, click: function…


отображение изображения в горизонтальном ряду android

Я пытаюсь отобразить изображение в горизонтальном ряду. Изображение появляется, но вместо пяти изображений отображается только три из них. Ниже приведен мой фрагмент. <LinearLayout…

Как разместить элементы списка горизонтально?

Мы расскажем вам, как выравнять элементы маркированного списка по горизонтали.

По-умолчанию элементы списка располагаются вертикально друг под другом.

Для того, чтобы выравнять их по горизонтали необходимо использовать свойство display для <li> элементов.

Код HTML-разметки одинаков для всех методов:

<ul>
	<li>Первый</li>
	<li>Второй</li>
	<li>Третий</li>
</ul>

Первый способ

Первый, самый древний способ — в качестве значения display выставляем inline. Так же для наглядности выставим границу в 1px:

ul li {
	border:1px solid #000;
	display:inline;
}

Вот как это будет выглядеть:

  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Второй способ

Это более современный вариант, в качестве значения display ставим inline-block. Это значит, что <li> элементы станут блочными но расположены будут в строчку, в некоторых случаях нужен именно такой вариант:

ul li {
	border:1px solid #000;
	display:inline-block;
}
  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Третий способ

Последний вариант более специфичен. Сначала задаем свойству display значение block, сделав элементы блочными, а потом при помощи свойства float, прижимаем их к левому краю.

В этом случае так же лучше задавать тегу <ul> свойство overflow со значением hidden, иначе браузер «не почувствует» элементов списка.

ul {
	overflow:hidden;
}
ul li {
	border:1px solid #000;
	display:block;
	float:left;
}
  • Первый
  • Второй
  • Третий

Отличительная особенность этого способа в том, что между элементами нету никаких отступов стандартных и их можно регулировать самому при помощи свойств margin и padding.

Как сделать навигационное меню — учебник CSS

Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.

Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:


<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Изначально, без стилей наша навигация выглядит, как обычный список:


Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:


.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.

После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.

Вертикальное меню

Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
 

Блочные ссылки

Прежде всего нужно сделать все теги <a> блочными элементами:


.menu a { display: block; }

Существует несколько причин для этого:

  1. Вы сможете задавать отступы для ссылок.
  2. Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет:



    GIF

    Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.

  3. Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.

 

Ширина меню

Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu, например:


.menu { width: 300px; }



Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
 

Разделение пунктов

Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:


.menu a {
    border-top: 1px solid blue;
}
.menu {
    border-bottom: 1px solid blue;
}



Высота пунктов и вертикальное выравнивание

Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:


.menu a {
  height: 30px;
  line-height: 30px;
}


GIF

Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

Горизонтальное меню

Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
 

Способ первый

Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:


.menu li {
  display: inline;
}



При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.

После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:


.menu a {
  text-decoration: none;
  font-family: sans-serif;
  color: #5757a0;
  display: inline-block;
  padding: 10px 20px;
  background-color: lavender;
  border-bottom: 5px solid #5757a0;
}



Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:


<ul>
 <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li>
 ...
</ul>



Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:


.menu li {
  margin-right: -5px;
}

Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.

Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
 

Способ второй

Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:


.menu li {
  float: left;
}



Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, <h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:


.menu {
  overflow: hidden;
}

Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after. Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.



GIF

Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?


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

c# — Горизонтальный список в RazorPages

Нужно создать горизонтальный список. Есть стиль

<style>
    ul.hr {
        margin: 0; /* Обнуляем значение отступов */
        padding: 4px; /* Значение полей */
    }

        ul.hr li {
            display: inline; /* Отображать как строчный элемент */
            margin-right: 5px; /* Отступ слева */
            border: 1px solid #000; /* Рамка вокруг текста */
            padding: 3px; /* Поля вокруг текста */
        }
</style>

Есть пример где этот стиль работает и выводит горизонтальный список

<ul>
    <li>Мчади</li>
    <li>Када на мацони</li>
    <li>Пахлава</li>
    <li>Кчуч</li>
    <li>Лилибдж</li>
</ul>

И есть пример где этот стиль не работает.

<h4>Топ 5 самых читаемых</h4>
@{
    if (Model.TopReaded == null)
    {
        return;
    }
    foreach (var topRateBook in Model.TopReaded)
    {
        <ul>
            <li>
                <p><img src="@Url.Content(topRateBook.Value)"></p>
                <p>@topRateBook.Key.RateOfBook</p>
                <p>@topRateBook.Key.ReadCount</p>
                <p>@topRateBook.Key.BookName</p>
                <p>@topRateBook.Key.AuthorPseudonym</p>

            </li>

        </ul>

    }
}

Как создать горизонтальный список из элементов этого цикла?

Добавлено: Из ответов вижу, что не совсем корректно сформировал вопрос.

Цикл выдает картинку и 3 строчки за одну итерацию. Это — один элемент и он должен быть по горизонтали, т.е. картинка сверху, потом строчка, потом строчка, потом строчка.

А набор из таких элементов должен идти по горизонтали. Схема ниже

Картинка     Картинка    Картинка    Картинка
строчка      строчка     строчка     строчка
строчка      строчка     строчка     строчка
строчка      строчка     строчка     строчка

не будет идти горизонтально

Вопрос:

У меня есть ul, я хочу идти горизонтально, но не работает. Вот код:

HTML:

<ul>
<li>
<h3>Text</h3>
<p>....</p>
</li>
<li>
<h3>text</h3>
<p>....</p>
</li>
</ul>

CSs:

#ul_text {
list-style-type: none; display:inline; }

#ul_text li{
border-right: 1px solid #ffffff; width:260px; }

Однако это не работает! что я делаю неправильно?

Лучший ответ:

Вы можете попробовать плавать элементы li:

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  float: left;
}

или добавить: list-style-type: none;, а также переключить display: inline на элемент li, как уже было предложено.

#ul_text li {
  border-right: 1px solid #ffffff; 
  width:260px; 
  display: inline; 
  list-style-type: none;
}

Ответ №1

Вам нужно поставить display: inline на ваш li вместо ul, например:

#ul_text {
list-style-type: none;
}

#ul_text li {
border-right: 1px solid #ffffff;
width:260px;
display:inline;
}

Ответ №2

Вот пример: http://css.maxdesign.com.au/listamatic/horizontal01.htm

HTML
<div>
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Ответ №3

добавить

float:left;

к

#ul_text {list-style-type:none; }

Группа списков. Компоненты · Bootstrap. Версия v4.3.1

Группы списков — это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.

Базовые примеры

Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Активные элементы

Добавьте в .list-group-item класс .active для обозначения текущего активного выбора.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Неактивные элементы

Добавьте класс .disabled к элементу класса .list-group-item для придания последнему вида «неактивного». Заметьте, что некоторые элементы класса .disabled также потребуют JavaScript для полной деактивации их событий клика (например, ссылки).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Ссылки и кнопки

Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.

Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

В <button> вы можете также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают отключенный атрибут.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button" disabled>Vestibulum at eros</button>
</div>

Смывание

Добавьте класс .list-group-flush чтобы удалить некоторые границы и закругленные углы, а также чтобы отображать элементы группы списка от края до края в родительском контейнере (например, в карточках).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Горизонтальный

Добавьте .list-group-horizontal, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное для всех точек останова. Или же выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl}, чтобы сделать группу списков горизонтальной, начиная с min-width точки останова. В настоящее время горизонтальные группы списков не могут быть объединены с группами списков смывания.

ProTip: Хотите, чтобы элементы списка равной ширины были горизонтальными? Добавьте .flex-fill к каждому элементу группы списков.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
</ul>

Контекстуальные классы

Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.

  • Dapibus ac facilisis in
  • Элемент основной группы списков
  • Дополнительный элемент группы списков
  • Элемент группы списка успешных действий
  • Элемент группы списка опасности
  • Элемент группы списка предупреждений
  • Элемент группы списка информации
  • Элемент группы с легким списком
  • Элемент группы темных списков
<ul>
  <li>Dapibus ac facilisis in</li>

  
  <li>Элемент основной группы списков</li>
  <li>Дополнительный элемент группы списков</li>
  <li>Элемент группы списка успешных действий</li>
  <li>Элемент группы списка опасности</li>
  <li>Элемент группы списка предупреждений</li>
  <li>Элемент группы списка информации</li>
  <li>Элемент группы с легким списком</li>
  <li>Элемент группы темных списков</li>
</ul>

Контекстуальные классы также работают с классом .list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.

<div>
  <a href="#">Dapibus ac facilisis in</a>

  
  <a href="#">Элемент основной группы списков</a>
  <a href="#">Дополнительный элемент группы списков</a>
  <a href="#">Элемент группы списка успешных действий</a>
  <a href="#">Элемент группы списка опасности</a>
  <a href="#">Элемент группы списка предупреждений</a>
  <a href="#">Элемент группы списка информации</a>
  <a href="#">Элемент группы с легким списком</a>
  <a href="#">Элемент группы темных списков</a>
</div>
Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Со значками

Добавляйте значки в любой элемент группы списков для показа счетчиков, активности и т.п. с помощью утилит.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
<ul>
  <li>
    Cras justo odio
    <span>14</span>
  </li>
  <li>
    Dapibus ac facilisis in
    <span>2</span>
  </li>
  <li>
    Morbi leo risus
    <span>1</span>
  </li>
</ul>

Стандартное содержимое

Добавьте почти любой код HTML с помощью утилит флексбокса, даже для групп списков со ссылками, как в примере ниже.

<div>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>

Поведение JavaScript

Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js — для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div>
  <div>
    <div role="tablist">
      <a data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.

<!-- List group -->
<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Через JavaScript

Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельный элемент списка несколькими способами:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Эффект угасания

Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Методы

$().tab

Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.

<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>
.tab(‘show’)

Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).

$('#someListItem').tab('show')

События

При показе новой вкладки события запускаются в таком порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке, которая вот-вот покажется)
  3. hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)
  4. shown.bs.tab (на вкладке, только что ставшей активной и только что ставшей показанной, такое же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab не произойдут.

Тип события Описание
show.bs.tab Используйте события event.target и event.relatedTarget для «нацеливания» на соответственно на активную и предыдущую активную (если она доступна) вкладки.
shown.bs.tab Это событие наступает при показе вкладки, после того, как она показана. Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную и предыдущую активную (если она доступна) вкладки.
hide.bs.tab Это событие наступает, когда вот-вот покажется новая вкладка (и предыдущая, т.о., вот-вот скроется). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную текущую вкладку и ту, которая вот-вот откроется.
hidden.bs.tab Это событие наступает, когда показана новая вкладка (и предыдущая активная, т.о., скрылась). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на предыдущую активную и новую активную вкладки.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Центрирование элементов списка по горизонтали (немного сложнее, чем вы думаете)

Обновление , апрель 2013 г .: Эта статья довольно старая. Это не очень сложно. Просто введите текст по центру списка (например, ul.nav {text-align: center;} ) и элементы списка inline-block (например, ul.nav li {display: inline-block;} ). Если по какой-то причине вы хотите сделать это с полем, посмотрите width: fit-content; .

Текущий стандарт кодирования меню — неупорядоченные списки.Он не такой семантический, как тег

Промывка

Добавьте .list-group-flush , чтобы удалить некоторые границы и закругленные углы для рендеринга элементов группы списков от края до края в родительском контейнере (например, карточки).

  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  • Porta ac Concectetur ac
  • Вестибулум на эросе
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus
  • Porta ac Concectetur AC
  • Вестибулум на Эросе.

По горизонтали

Добавьте .list-group-horizontal , чтобы изменить расположение элементов группы списков с вертикального на горизонтальное во всех точках останова. В качестве альтернативы выберите адаптивный вариант .list-group-horizontal- {sm | md | lg | lg | xl} , чтобы сделать группу списков горизонтальной, начиная с минимальной ширины этой точки останова . В настоящее время групп горизонтальных списков не могут быть объединены с группами скрытых списков.

Совет: Хотите, чтобы элементы группы списков равной ширины находились в горизонтальном положении? Добавьте .flex-fill к каждому элементу группы списка.

  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis в
  • Морби лев рис
  
  • Cras justo odio
  • Dapibus ac facilisis в
  • Morbi leo risus

Контекстные классы

Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.

  • Dapibus ac facilisis в
  • Элемент группы простого первичного списка
  • Элемент группы простого вторичного списка
  • Элемент группы простого списка успешных действий
  • Элемент группы простого списка опасностей
  • Элемент группы простого списка предупреждений
  • Элемент группы простого информационного списка
  • Элемент группы простого светового списка
  • Простой элемент группы темного списка
  
  • Dapibus ac facilisis в
  • Простой элемент основной группы списка.
  • Простой вторичный элемент группы списка.
  • Простой групповой элемент списка успешных действий.
  • Простой групповой элемент списка опасностей.
  • Элемент группы простого списка предупреждений.
  • Элемент группы простого информационного списка.
  • Простой элемент группы светового списка.
  • Простой групповой элемент темного списка.

Контекстные классы также работают с .список-группа-элемент-действие . Обратите внимание на добавление стилей наведения, которых не было в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.

    
Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

со значками

Добавьте значки к любому элементу группы списка, чтобы отображать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

  • Cras Justo Odio 14
  • Dapibus ac facilisis в 2
  • Morbi leo risus 1
  
  • Cras Justo Odio 14
  • Dapibus ac facilisis в 2
  • Morbi leo risus 1

Пользовательский контент

Добавьте практически любой HTML-код внутри, даже для групп связанных списков, подобных приведенной ниже, с помощью утилит flexbox.

    

Поведение JavaScript

Используйте подключаемый модуль JavaScript вкладки — включите его индивидуально или через скомпилированный загрузчик .js — чтобы расширить нашу группу списков для создания вкладок локального содержимого.

Velit aute mollit ipsum ad dolor conctetur nulla officia culpa adipisicing упражнения fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate PRPRESSENDERIT occaecat nisi ad non Minimum tempor sunt Voluptate Conctetur Exercise id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt conctetur culpa aliquip eiusmod dolor.Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur Laborum in esse qui. Et excepteur conctetur ex nisi eu do cillum ad Laborum. Mollit et eu officia dolore sunt Lorem culpa qui normo velit ex amet id ex. Officia anim incididunt labouris deserunt anim aute dolor incididunt veniam aute dolore делать упражнения. Dolor nisi culpa ex ad irure in elit eu dolore. Ad labouris ipsum correhenderit irure noncommodo enim culpa communiam incididunt veniam ad.

Выполнение упражнений pariatur aliquip aliqua aliquip do nostrud Commodo Prerehenderit aute ipsum voluptate. Irure Lorem et labouris nostrud amet cupidatat cupidat anim do ut velit mollit consquat enim tempor. Consectetur est minim nostrud nostrudconctetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla Laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip REPREHENDERIT Amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat labouris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut упражнение iruremodo non amet conctetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

    

Использование атрибутов данных

Вы можете активировать навигацию по группам списков без написания кода JavaScript, просто указав data-toggle = "list" или в элементе.Используйте эти атрибуты данных в .list-group-item .

  



...
...
...
...

Через JavaScript

Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать индивидуально):

  $ ('# myList a'). On ('click', function (e) {
  e.preventDefault ()
  $ (это) .tab ('показать')
})  

Активировать отдельный элемент списка можно несколькими способами:

  $ ('# myList a [href = "# profile"]').tab ('show') // Выбираем вкладку по имени
$ ('# myList a: first-child'). tab ('show') // Выбрать первую вкладку
$ ('# myList a: last-child'). tab ('show') // Выбрать последнюю вкладку
$ ('# myList a: nth-child (3)'). tab ('show') // Выбрать третью вкладку  

Эффект затухания

Чтобы панель вкладок постепенно увеличивалась, добавьте .fade к каждой .tab-pane . На первой панели вкладок также должно быть указано .show , чтобы исходное содержимое было видимым.

  
...
...
...
...

Методы

$ (). Вкладка

Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь либо data-target , либо href , нацеленный на узел контейнера в DOM.

  

...
...
...
...
<сценарий> $ (function () { $ ('# myList a: last-child'). tab ('показать') })
.tab («показать»)

Выбирает указанный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был ранее выбран, становится невыделенным, а связанная с ним панель скрывается. Возврат к вызывающему абоненту до того, как панель вкладок будет фактически показана (например, до отображения .bs.tab ).

  $ ('# someListItem'). Tab ('show')  

События

При отображении новой вкладки события запускаются в следующем порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке для показа)
  3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
  4. Показано
  5. .bs.tab (на недавно активированной только что показанной вкладке та же, что и для показа .bs.tab событие)

Если ни одна вкладка еще не была активна, события hide.bs.tab и hidden.bs.tab запускаться не будут.

Показано
Тип события Описание
показать.bs.tab Это событие возникает при отображении вкладки, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
.bs.tab Это событие возникает при отображении вкладок после того, как вкладка была показана. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если таковая имеется) соответственно.
hide.bs.tab Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
hidden.bs.tab Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для нацеливания на предыдущую активную вкладку и новую активную вкладку соответственно.
  $ ('a [data-toggle = "list"]'). On ('shown.bs.tab', function (e) {
  e.target // недавно активированная вкладка
  e.relatedTarget // предыдущая активная вкладка
})  

Создание центрированной горизонтальной навигации — CSS Wizardry — Оптимизация веб-производительности

Написано на CSS Wizardry .

Содержание
  1. Демо
  2. Обновление

Центрировать элементы уровня блока легко, просто задайте ширину и установите margin: 0 auto; , г. но что, если вы не знаете эту фиксированную ширину? Вы можете использовать text-align: center; но это не сработает и для блочных элементов со 100% шириной … работать с элементами текстового уровня.

По возможности всегда следует избегать явного определения ширины и высоты, так как это сделает документ менее ориентированным на будущее, гибким и расширяемый … Предположим, у вас есть четыре пункта в меню навигации — вы можете работать вне их ширины и используйте поле : 0 auto; , чтобы отцентрировать их.Добавление пятого увеличит ширину, а это значит, что вам также придется изменить CSS. Это далеко от идеала, и более того, с помощью CMS для управления сайтом (клиент может добавлять страницы, но, возможно, не могу редактировать CSS).

Однако есть способ иметь центрированную горизонтальную навигацию без указания явной ширины и без добавления CSS. Это также замечательно просто.

В разметке:

  
  

Довольно стандартный, неупорядоченный список пунктов меню.CSS — вот где это. Я выделил те части, которые выполняют большую часть работы:

  .nav {
    граница: 1px solid #ccc;
    ширина границы: 1px 0;
    стиль списка: нет;
    маржа: 0;
    отступ: 0;
      выравнивание текста: по центру; 
}
.nav li {
      дисплей: встроенный; 
}
.nav a {
      дисплей: строчно-блочный; 
    отступ: 10 пикселей;
}  

Я просто создал список навигации и присвоил ему верхнюю границу. и снизу (просто чтобы выделить его центрированный текст).Вместо того, чтобы плавать уровень блока

  • Осталось сек. Я дал им display: inline; , то есть они больше не занимают 100% доступной ширины и теперь хорошо складываются друг против друга.

    Далее мы используем (очень редко используемый) display: inline-block; , чтобы убедиться, что ссылки сами по себе не переходят на новые строки, но по-прежнему подчиняются любым значениям заполнения соответственно. Здесь я увеличил область попадания, добавив отступ : 10px;

    При желании вы могли бы применить встроенный блок к

  • s.тем не мение IE6-7 разрешит только inline-block работать с элементами, которые по своей сути встроенные элементы. дисплей: встроенный блок; не будет работать с элементами блочного уровня.

    Вот небольшая демонстрация. Попробуйте использовать Firebug или подобное, чтобы добавить другие элементы списка на лету и наблюдайте, как они плавно центрируются в списке. я протестировали это в IE7-8, чтобы убедиться, что он отлично работает.