Равномерное распределение блоков внутри родителя

@pauliv · Регистрация: 22.04.2015

Студворк — интернет-сервис помощи студентам

Требуется сдлеать навигацию, чтобы пункты распределялись равномерно по ширине родителя.
Решение inline-block не подходит, поскольку ровно посреди пунктов меню нужно разместить маркер, а в случае с inline-block ширина блоков становиться равной ширине текста пункта меню.
Какие еще есть варианты?
Картинку прилагаю.

Равномерное распределение блоков внутри родителя

@gulliver · 07.05.2015, 17:01

table попробуй

@pauliv · 07.05.2015, 17:05 **[ТС]**

Сообщение от gulliver

table попробуй

table делает отступы внутри ячеек в зависимости от ширины текста внутри. Поэтому маркеры не получатся ровно посреди элементов.

@gulliver · 07.05.2015, 17:09

можно использовать •

@pauliv · 08.05.2015, 09:11 **[ТС]**

Сообщение от gulliver

можно использовать •

Это как?

@Qwertiy · 08.05.2015, 13:28

Сообщение от pauliv

в случае с inline-block ширина блоков становиться равной ширине текста пункта меню

Неправда. Можно же явно ширину задать.
Только, судя по твоим скриншотам тебе как раз и нужна ширина по тексту.

Сообщение от pauliv

Какие еще есть варианты?

Flexbox?

Добавлено через 38 минут
Вот, вроде ровно, но если всё-таки нет, то можно подогнать. http://jsfiddle.net/7y9tngdb/2/

HTML5
1
2
3
4
5
6
<ul>
    <li>Пункт 1</li>
    <li>Пункт опа 2</li>
    <li>Пункт длинный 3</li>
    <li>Пункт 4</li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 2em;
    line-height: 2em;
}
 
li {
   text-align: center;
}
 
li + li::before {
    content: "•";
    float: left;
}

Добавлено через 1 минуту
Или надо было без отступов по краям?

@pauliv · 08.05.2015, 19:26 **[ТС]**

Сообщение от Qwertiy

Неправда. Можно же явно ширину задать

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

Сообщение от Qwertiy

Flexbox?

подддержка браузерами -то совсем слабая

Сообщение от Qwertiy

Или надо было без отступов по краям?

Если из 2 зол, то можно и без отступов

@Lazy_Den · 08.05.2015, 20:48

Сообщение от pauliv

подддержка браузерами -то совсем слабая

Разве это называется "совсем слабая"?

@Qwertiy · 09.05.2015, 11:31

Сообщение от pauliv

Если из 2 зол, то можно и без отступов

А как надо-то?
Без отступов у меня не вышло распихать разделители по псевдоэлементам.

Сообщение от pauliv

подддержка браузерами -то совсем слабая

81%, по России 78%.

Сообщение от pauliv

Какие еще есть варианты?

Если пихать разделители в список (в разметку), то можно сделать оба варианта (с отступами по краям и без) с более простым фоллбеком с центрированным меню и не городить всякие фокусы.

@pauliv · 09.05.2015, 13:53 **[ТС]**

Сообщение от Qwertiy

Если пихать разделители в список (в разметку), то можно сделать оба варианта (с отступами по краям и без) с более простым фоллбеком с центрированным меню и не городить всякие фокусы.

А могли бы так сделать?

@almaz1994 · 09.05.2015, 19:02

Сообщение от pauliv

А могли бы так сделать?

Никогда не было задачи, чтобы динамическое меню нужно было по ширине раскидать.
Если все таки так надо - то в раздел JS сходи. Обязательно найдется решение.
------
Как делаю обычно я?
Делаю так:

HTML5
1
2
3
<div style="display:table; margin:auto;">
   Оформляешь меню внутри.
</div>

Когда меню оформляешь задаешь для пунктов padding справа и слева одинаковый. Справа от каждого пункта меню ставишь разделитель. Для последнего пункта меню разделитель убираешь.
Решение простое. Все на ксс. Поддержка браузерами ништяковая. Меню динамическое. Можешь добавлять и удалять пункты. Разделители ровно посередине меж двумя пунктами.

@Qwertiy · 10.05.2015, 00:26

Сообщение от pauliv

А могли бы так сделать?

Да. Один из первых вариантов был таким, но так как я хотел запихать разделители в псевдоэлементы, от него пришлось отказаться.

Сообщение от almaz1994

Когда меню оформляешь задаешь для пунктов padding справа и слева одинаковый.

Если сайт предполагает локализацию, то фиксированные паддинги, подогнанные к нужной ширине - не вариант.

Сообщение от almaz1994

Для последнего пункта меню разделитель убираешь.

Надо для первого убирать. Для последнего хуже производительность селектора и нет поддержки в IE7.

Добавлено через 1 час 9 минут

Сообщение от pauliv

А могли бы так сделать?

http://jsfiddle.net/7y9tngdb/12/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ul class="nav">
    <li>Пункт 1</li>
    <li>•</li>
    <li>Пункт опа 2</li>
    <li>•</li>
    <li>Пункт длинный 3</li>
    <li>•</li>
    <li>Пункт 4</li>
</ul>
 
<ul class="nav alt">
    <li>Пункт 1</li>
    <li>•</li>
    <li>Пункт опа 2</li>
    <li>•</li>
    <li>Пункт длинный 3</li>
    <li>•</li>
    <li>Пункт 4</li>
</ul>
 
<ul class="nav alt">
    <li></li>
    <li>Пункт 1</li>
    <li>•</li>
    <li>Пункт опа 2</li>
    <li>•</li>
    <li>Пункт длинный 3</li>
    <li>•</li>
    <li>Пункт 4</li>
    <li></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.nav {
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
  text-align: center;
  background-color: #ACF;
  line-height: 2em;
}
 
.nav.alt {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
 
.nav li {
  display: inline-block;
  text-align: center;
}

Полностью работает в
• Google Chrome 40.0.2214.115
• Spark 26.2.9999.797 (эквивалентно хрому той же версии)
• Firefox 38.0
• Opera 12.17 1863 x64
• Internet Explorer 11.0.9600.17728
• Internet Explorer 11.0.9600.17728 :: Эмуляция IE10

Корректный фоллбек (выровненное по центру меню) в
• Internet Explorer 11.0.9600.17728 :: Эмуляция 9

Некорректный фоллбек (выровненное по левому краю меню) в
• Safari 5.1.7 (Windows)

@pauliv · 11.05.2015, 21:51 **[ТС]**

Сообщение от Qwertiy

Если сайт предполагает локализацию, то фиксированные паддинги, подогнанные к нужной ширине - не вариант.

это точно!

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

@Qwertiy · 11.05.2015, 22:05

Сообщение от pauliv

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

1. Тогда зачем спрашивал остальные?
2. Там надо дописать свойств с префиксами.
3. Там, вроде, в случае отсутствия поддержки флексбокса (и при неполной поддержке) может что-то нехорошее получиться? На всех брваузерах проверил?

@pauliv · 11.05.2015, 22:14 **[ТС]**

Сообщение от Qwertiy

1. Тогда зачем спрашивал остальные?

Решил не растягивать по краям. соответственно отпадает нужда в лишних <li>

Сообщение от Qwertiy

3. Там, вроде, в случае отсутствия поддержки флексбокса (и при неполной поддержке) может что-то нехорошее получиться? На всех брваузерах проверил?

Это именно с псевдоэлементами?

@pauliv · 02.06.2015, 15:38 **[ТС]**

http://jsfiddle.net/digitalmedia/s2Lpgojf/

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

@Qwertiy · 02.06.2015, 17:36

Сообщение от pauliv

подскажите, как сделать, чтобы не дергалось меню при наведении

Жуть.. Держи костыль: http://jsfiddle.net/s2Lpgojf/5/

Добавлено через 4 минуты
Или так: http://jsfiddle.net/s2Lpgojf/7/

Добавлено через 2 минуты
Кстати, ненормально было только в Хроме.
Опера 12, FF и даже IE сдвигают адекватно в соответствии с изменившейся жирностью.

Добавлено через 1 минуту
Код, пока кто-нибудь снова предупреждение не влепил.

HTML5
1
2
3
4
5
6
<ul>
    <li><a href="#" aria-label="Пункт 1"></a></li>
    <li><a href="#" aria-label="Пункт опа 2"></a></li>
    <li><a href="#" aria-label="Пункт длинный 3"></a></li>
    <li><a href="#" aria-label="Пункт 4"></a></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 2em;
    line-height: 2em;
}
 
li {
   text-align: center;
}
 
li + li::before {
    content: "•";
    float: left;
}
 
li a {
    display:block;
    position: relative;
    text-decoration: none;
}
 
li a:before {
    content: attr(aria-label);
    position: absolute;
    left: 0;
    top: 0;
    left: 0;
    right: 0;
    text-decoration: underline;
}
 
li a:after {
    content: attr(aria-label);
    font-weight: bold;
    text-decoration: underline;
}
 
li a:hover:before, li a:after {
    color: transparent;
    text-decoration-color: transparent;
}
 
li a:hover:after {
    color: inherit;
    text-decoration-color: inherit;
}

Добавлено через 17 минут
http://jsfiddle.net/s2Lpgojf/10/ - чтобы её ещё и нажимать можно было:

CSS
1
2
3
4
5
6
7
8
9
10
li a {
    display:block;
    position: relative;
    text-decoration: none;
    outline: none;
}
 
li a:focus:before {
   outline: -webkit-focus-ring-color auto 5px;
}

Добавлено через 7 минут

Сообщение от pauliv

Это именно с псевдоэлементами?

Нет, скорее с самим флексбоксом. Я не проверял.
Я только другой вариант проверил.

@pauliv · 02.06.2015, 18:03 **[ТС]**

Qwertiy,
Какой-то костыль реальный. Лучше уж наверное js использовать для равномерного распределения пунктов, вместо flexbox.

@Qwertiy · 02.06.2015, 18:24

Сообщение от pauliv

Какой-то костыль реальный.

А нужен нереальный костыль?)))
Можешь послать баг к движку.

Сообщение от pauliv

Лучше уж наверное js использовать для равномерного распределения пунктов, вместо flexbox.

А чем этот вариант не угодил? http://jsfiddle.net/7y9tngdb/12/ С ним хром адекватно двигает, как все.

@pauliv · 02.06.2015, 18:47 **[ТС]**

Сообщение от Qwertiy

А чем этот вариант не угодил? http://jsfiddle.net/7y9tngdb/12/ С ним хром адекватно двигает, как все.

Да, либо этот тогда, если клинт будет настаивать на жирном шрифте при наведении.
Спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@pauliv 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 27

	Равномерное распределение блоков внутри родителя 07.05.2015, 16:47. Показов 11232. Ответов 20 Метки нет (Все метки) Требуется сдлеать навигацию, чтобы пункты распределялись равномерно по ширине родителя. Решение inline-block не подходит, поскольку ровно посреди пунктов меню нужно разместить маркер, а в случае с inline-block ширина блоков становиться равной ширине текста пункта меню. Какие еще есть варианты? Картинку прилагаю. 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	07.05.2015, 17:01
	table попробуй 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	07.05.2015, 17:09
	можно использовать • 0

@pauliv 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 27
	02.06.2015, 15:38 [ТС]
	http://jsfiddle.net/digitalmedia/s2Lpgojf/ подскажите, как сделать, чтобы не дергалось меню при наведении. В Chrome совсем разлетается все 0

@pauliv 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 27
	02.06.2015, 18:03 [ТС]
	Qwertiy, Какой-то костыль реальный. Лучше уж наверное js использовать для равномерного распределения пунктов, вместо flexbox. 0