Три <li>, слева по центру и справа

Question

Три <li>, слева по центру и справа

0

У меня три <li>. К сожалению, я не могу дать им каждое собственное имя класса (иначе это было бы проще).

Мне нужно, чтобы один выровнялся влево, один - в центр, а один - вправо. Есть ли способ сделать это в CSS, который может учитывать переменный размер <ul>?

Если посмотреть на другие вопросы, есть возможность использовать li:last-child. Это все равно будет проблемой для тех, кто использует большинство IE, поскольку поддержка существует только в IE9.

Deepak 16 янв. 2014, в 19:46

Источник

1

Я обычно использую display: inline-block . Но вам нужна ширина для каждого элемента li.
Gasim 16 янв. 2014, в 18:21
1

2 возможных решения с минимальной разметкой.
Nicholas Hazel 16 янв. 2014, в 18:24
0

метод text-align-justify работает в IE5.5, если вы используете дополнительный элемент вместо псевдо-после-элемента и используете Conditionnal Comment с display: inline; zoom: 1; Я могу обновить свой ответ и предоставить пример, если это необходимо.
G-Cyr 16 янв. 2014, в 19:02

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

2

[edit] К тому времени, когда я отправляю сообщение, базовый поплавок был достаточно хорош, il оставить ответ для любопытных людей :) [/edit]

есть 2 варианта, о которых я думаю без использования float, а также display: table; (на самом деле доступно 4 варианта):

1) дисплей: flex;

2) text-align: justify; и некоторые настройки:

http://codepen.io/gc-nomade/pen/zcGmC

<ul class="flex">
  <li>flex me</li>
  <li>flex me</li>
  <li>flex me</li>
</ul>
<ul class="justify">
  <li>Justify me</li>
  <li>Justify me</li>
  <li>Justify me</li>
</ul>

.flex {
  display:flex;
  justify-content:space-between;
}

.justify {
  text-align:justify;
}
.justify:after {
  content:'';
  display:inline-block;
  width:100%;
}
.justify li {
  display:inline-block;
}

G-Cyr 16 янв. 2014, в 16:09

0

Приятно :-) Я никогда не использовал метод display:flex . Я должен исследовать это. Новичок в CSS3?
Nicholas Hazel 16 янв. 2014, в 18:56
0

действительно тихо, немного информации здесь: css-tricks.com/snippets/css/a-guide-to-flexbox :)
G-Cyr 16 янв. 2014, в 18:57
0

Да, я читал это, прежде чем вы отправили :-P Спасибо за ресурс!
Nicholas Hazel 16 янв. 2014, в 19:00
0

Мне очень нравится это решение. Я немного неразумен и прошу поддержки старых браузеров. Я, вероятно, собираюсь использовать его, возможно, поддерживать старые браузеры другим способом.
Deepak 16 янв. 2014, в 19:01
0

с дополнительным элементом и условным комментарием, вы можете включить IE5.5, если хотите использовать метод text-align
G-Cyr 16 янв. 2014, в 19:03

Показать ещё 3 комментария

Ещё вопросы

Я обычно использую display: inline-block . Но вам нужна ширина для каждого элемента li.
2 возможных решения с минимальной разметкой.
метод text-align-justify работает в IE5.5, если вы используете дополнительный элемент вместо псевдо-после-элемента и используете Conditionnal Comment с display: inline; zoom: 1; Я могу обновить свой ответ и предоставить пример, если это необходимо.
Приятно :-) Я никогда не использовал метод display:flex . Я должен исследовать это. Новичок в CSS3?
действительно тихо, немного информации здесь: css-tricks.com/snippets/css/a-guide-to-flexbox :)
Да, я читал это, прежде чем вы отправили :-P Спасибо за ресурс!
Мне очень нравится это решение. Я немного неразумен и прошу поддержки старых браузеров. Я, вероятно, собираюсь использовать его, возможно, поддерживать старые браузеры другим способом.
с дополнительным элементом и условным комментарием, вы можете включить IE5.5, если хотите использовать метод text-align

Nicholas Hazel · Accepted Answer · 2014-01-16T15-08-00.000Z

Fiddle Here http://jsfiddle.net/q4d9r/

Просто используйте ширину 33% и float:left на ваших li.

Установите свою ul в любую нужную width.

РЕДАКТИРОВАТЬ:

Если вам абсолютно необходимо их выровнять, вы всегда можете использовать inline стили поверх описанного выше метода.

http://jsfiddle.net/q4d9r/1/

<ul class="test">
    <li style="text-align:left">Item One</li>
    <li style="text-align:center">Item Two</li>
    <li style="text-align:right">Item Three</li>
</ul>

Это немного странный вопрос, я действительно хочу, чтобы текст слева <li> был выровнен по левому краю, а справа - по правому. Увеличивая ширину, я должен сделать выбор относительно того, где мой текст выравнивается
Что ж, использование встроенных стилей в edited разделе решает, что ... не так ли?