Горизонтальное меню с равной длиной пунктов

@Frip · Регистрация: 04.11.2013

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

Имеется div (menu) c длинной 780, высотой 33.

Вставляю в него список, всячески его форматирую, но он либо расширяет высоту (что делает более 33px), либо становится меньше.

Подскажите, как правильно сделать горизонтальное меню, где можно длину каждого пункта можно задать (например каждый пункт li длинной - 100 px)

Вот с этим пробовал сделать:

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="menu">
    <ul id="navbar">
        <li><a href="#">COMPANY</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">RESELLERS</a></li>
        <li><a href="#">SUPPORT</a></li>
        <li><a href="#">CONTANTS</a></li>
    </ul>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 780px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar li { 
    display: inline; 
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}

@Fedor92 · 30.06.2015, 20:31

Frip, так?

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
 <html>
  <head>
         <link rel="stylesheet" type="text/css" href="css/style.css" />
   <meta charset="UTF-8">
   <title>Документ без названия</title>
  </head>
<style>
#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 780px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar li { 
    width: 100px;
    display: inline-block;
}
#navbar a {
  display:block;
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
 
}
</style>
<body>
<div id="menu">
    <ul id="navbar">
        <li><a href="#">COMPANY</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">RESELLERS</a></li>
        <li><a href="#">SUPPORT</a></li>
        <li><a href="#">CONTANTS</a></li>
    </ul>
  </div>
</body>
</html>

@Frip · 30.06.2015, 21:09 **[ТС]**

Это вроде правильно, а вроде и нет.
Вот пример, на первом скриншоте стоит длинна 100, все нормально, но когда ставишь 130 (на 2 скриншоте), он не сдвигается влево, чтобы все вместились, а сдвигает вниз.
Как сделать чтобы все пункты вместились, и не было такого огромного отступа перед первым пунктом

@Fedor92 · 30.06.2015, 21:32

Frip, это естественно потому-что у Вас увеличивается ширина меню... 130 пикселей - 6 пунктов меню(уже заявленные 780px) + внутренние отступы между пунктами... Увеличьте ширину меню, к примеру до 800px и всё уместится...

@Frip · 30.06.2015, 21:53 **[ТС]**

ну хорошо, это понятно.
Но почему например между левой границей и COMPANY, такой большой отступ, как убрать такой большой отступ?

@Fedor92 · 30.06.2015, 21:58

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

Но почему например между левой границей и COMPANY, такой большой отступ, как убрать такой большой отступ?

Не стоит задавать фиксированную ширину для пунктов меню!

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

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
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
 <html>
  <head>
         <link rel="stylesheet" type="text/css" href="css/style.css" />
   <meta charset="UTF-8">
   <title>Документ без названия</title>
  </head>
<style>
#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 780px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar li { 
    display: inline-block;
}
#navbar a {
  display:block;
  color: #fff;
  padding: 5px 15px;
  text-decoration: none;
  font-weight: bold;
 
}
</style>
<body>
<div id="menu">
    <ul id="navbar">
        <li><a href="#">COMPANY</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">RESELLERS</a></li>
        <li><a href="#">SUPPORT</a></li>
        <li><a href="#">CONTANTS</a></li>
    </ul>
  </div>
</body>
</html>

@Frip · 30.06.2015, 22:14 **[ТС]**

Это решило мой вопрос. Спасибо. Но всё-таки прошу.
Теперь пункты выровнялись по центру, а если мне надо сделать их прижатым к левому/правому краю, как это сделать?
И если мне надо сделать пункты меню фиксированной длинны, то как лучше сделать?

@Fedor92 · 01.07.2015, 00:57

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

Теперь пункты выровнялись по центру, а если мне надо сделать их прижатым к левому/правому краю, как это сделать?

Используйте свойство text-align для выравнивания пунктов меню по левому/правому краю...

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

И если мне надо сделать пункты меню фиксированной длинны, то как лучше сделать?

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

@Kenny7423 · 01.07.2015, 12:20

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
#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 780px;
  text-align: center;
  background-color: #33ADFF;
display:table;
height:40px;
}
#navbar li { 
    display: table-cell;
height:40px;
vertical-align:bottom; 
}
#navbar a {
  color: #fff;
  display:table-cell;
  height:40px;
  vertical-align:middle;
  text-decoration: none;
  font-weight: bold;
  width: 780px;
}

как вариант

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Frip 3 / 3 / 1 Регистрация: 04.11.2013 Сообщений: 285
	30.06.2015, 21:09 [ТС]
	Это вроде правильно, а вроде и нет. Вот пример, на первом скриншоте стоит длинна 100, все нормально, но когда ставишь 130 (на 2 скриншоте), он не сдвигается влево, чтобы все вместились, а сдвигает вниз. Как сделать чтобы все пункты вместились, и не было такого огромного отступа перед первым пунктом Миниатюры 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.06.2015, 21:32
	Frip, это естественно потому-что у Вас увеличивается ширина меню... 130 пикселей - 6 пунктов меню(уже заявленные 780px) + внутренние отступы между пунктами... Увеличьте ширину меню, к примеру до 800px и всё уместится... 1

@Frip 3 / 3 / 1 Регистрация: 04.11.2013 Сообщений: 285
	30.06.2015, 21:53 [ТС]
	ну хорошо, это понятно. Но почему например между левой границей и COMPANY, такой большой отступ, как убрать такой большой отступ? 0

@Frip 3 / 3 / 1 Регистрация: 04.11.2013 Сообщений: 285
	30.06.2015, 22:14 [ТС]
	Это решило мой вопрос. Спасибо. Но всё-таки прошу. Теперь пункты выровнялись по центру, а если мне надо сделать их прижатым к левому/правому краю, как это сделать? И если мне надо сделать пункты меню фиксированной длинны, то как лучше сделать? 0

Опции темы

Горизонтальное меню с равной длиной пунктов

Решение