Выравнивание блоков меню навигации

@Dmitri446 · Регистрация: 15.01.2014

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

Есть меню навигации(шапка):

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
 <div class = "header-container ">
     <!--ШАПКА-->
     <header class = "headerNav clearfix ">
            <ul class = "main-menu ">
                <!--logo-->
                <li class = "pullLeft"><a href = ""><h1>SHITNEWS</h1></a></li>
               
                <li>
                    <a  href = "">News</a>
                    <!--sub-menu-->
                    <ul class = "sub-menu ">
                        <li><a href = "">HOTNEWS</a></li>
                        <li><a href = "">Archive</a></li>
                        <li><a href = "">Треш</a></li>
                    </ul>
                </li><!--
                
                --><li><a href = "">Blogs</a></li><!--
               --><li><a href = "">Forum</a></li>
                
                
                <li class = "pullRight"><a href = "">Register</a></li>
                <li class = "pullRight"><a href = "">Login</a>
                    <ul class = "sub-menu1">
                        <li><a>Login</a></li>
                        <li><a>Passowrd</a>
                         <form>
                                text box:
                                <input type = "text"
                                       name = "Login"
                                       value = "your text here">
                            </form></li>
                    </ul>
                
                </li>
            </ul>
     </header>    
 </div>

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.header-container{
 
margin:0;
padding:0;
width:100%;
background-color:white;
position:fixed;
top:0;
   border-bottom:1px solid #d8d8d8;
   z-index:1;/*чтобы был поверх всех слоёв*/
}
 
.headerNav{
 
display:block;
text-align: center;
 
}
 
 
 
 
 
.headerNav a{/*делаем ссылки объёмными*/
    display:inline-block;
    padding:20px;
    text-decoration: none;
}
 
.headerNav a:hover{
    background:#efefef;
}
.main-menu >li{/*делаем все элементы списка inline-block чтобы выстроить их в одну строку.main-menu >li делаем чтобы блочно-строчными были только элементы верхнего уровня т.е только <li> которые находятся в main menu */
    
    margin: 0;
    padding:0;
    display:inline-block;
    position:relative;
    
    
}
.sub-menu{
    position:absolute;
   text-align: left;
   background: white;
    border-radius:1px;
    display:none;
}
.sub-menu1{
    position:absolute;
    text-align: left;
   background: white;
    border-radius:1px;
    display:none;
}
li:hover .sub-menu1{
    display:block;
}
.sub-menu1 a {
    padding:10px;
     width:100px;
}
.sub-menu a {
    padding:10px;
     width:100px;
}
 li:hover .sub-menu  {
    display: block;
     
}
 
.pullRight{/*делаем меню рег лог справа*/
    float:right;
}
.pullLeft{/*делаем лого слева*/
    float:left;
}

Проблема следующая три ссылки News Blogs Forum находятся немного не по центру,если замерять от левого края страницы до ссылки news выходит где то 522px, если мерить от ссылки forum до правого края страницы выходит 582px.

@Kenworth · 22.08.2016, 19:45

Естественно не по центру.
У Вас центр формируется между "SHITNEWS" и "Login"

@Fedor92 · 22.08.2016, 19:46

Dmitri446, как Вы вообще догадались три разных объекта воткнуть в один список?

Сделайте функциональную разбивку блок с лого, блок меню и блок авторизации и выравнивайте их... Зачем к ходулям приделывать костыли?

@Dmitri446 · 23.08.2016, 00:47 **[ТС]**

2Fedor92, переделал, но всёравно не ровно выходит

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class = "header-container ">
     <!--ШАПКА-->
     <header class = "headerNav clearfix ">
            <ul class = "shit"><li><a>SHITNEWS</a></li></ul>   
            
           <ul class = "navigation ">
                <li>asdasd</li>
                <li>asdasd</li>
                <li>asdasd</li>
         </ul>
         
         <ul class = "LogReg" >
            <li>Login</li>
            <li>Registrer</li>
         </ul>
     </header>    
 </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.header-container{
   width:100%;
    display:block;
}
 
 
.shit{
    float:left;
}
 
.LogReg{
    float:right;
}
 
.headerNav{
    text-align: center;
} 
 
 
 
.headerNav li,ul {
    display:inline-block;
   }

@Fedor92 · 23.08.2016, 01:02

Вот накидал на коленке...

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <meta charset="utf-8">
    <style>
    html, body{width: 100%; height: 100%}
    *{padding:0; margin: 0; box-sizing:border-box}
        a{text-decoration:none; color: #000; font:16px/1.25 Tahoma}
    .logo{
        float:left;
        width:10%;
    }
    
    .menu{
        float:left;
        width:70%
    }
    .LogReg{
        width:20%;
        float:left;
        text-align:right
    }
    .logo, .menu, .LogReg{padding:20px 0}
    
    .headerNav{
        text-align: center;
    } 
    .headerNav li, ul {
        display:inline-block;
        list-style:none
    }
    li{margin:0 0 0 20px}
    
    div{border:1px solid red}
   
    </style>
</head>
<body>
    <div class = "header-container ">
        <!--ШАПКА-->
        <header class = "headerNav clearfix ">
            <div class="logo">
                <a href="/">SHITNEWS</a>
            </div>
            <div class="menu">
                <ul class="navigation">
                    <li><a href="">item-1</a></li>
                    <li><a href="">item-2</a></li>
                    <li><a href="">item-3</a></li>
                </ul>
            </div>
            <div class="LogReg">
                <ul>
                    <li><a href="">Login</a></li>
                    <li><a href="">Registrer</a></li>
                </ul>
            </div>
     </header>    
 </div>   
</body>
</html>

@Dmitri446 · 23.08.2016, 12:07 **[ТС]**

Fedor92, ну так у вас вышло тоже самое что и у меня

, основной блок навигации не поцентру, он стоит по центру между левым и правым блоком, а как сделать так чтобы он был по центру самой шапки(header)

@Fedor92 · 23.08.2016, 12:20

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

ну так у вас вышло тоже самое что и у меня

Далеко не то же самое... Я бы даже сказал вообще не тоже самое... Для того, чтобы меню встало по центру надо отрегулировать значения ширины в моём примере...

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <meta charset="utf-8">
    <style>
    html, body{width: 100%; height: 100%}
    *{padding:0; margin: 0; box-sizing:border-box}
        a{text-decoration:none; color: #000; font:16px/1.25 Tahoma}
    .logo{
        float:left;
        width:15%;
    }
    
    .menu{
        float:left;
        width:70%
    }
    .LogReg{
        width:15%;
        float:left;
        text-align:right
    }
    .logo, .menu, .LogReg{padding:20px 0}
    
    .headerNav{
        text-align: center;
    } 
    .headerNav li, ul {
        display:inline-block;
        list-style:none
    }
    li{padding:0 10px}
    div{border:1px solid red}
   
    </style>
</head>
<body>
    <div class = "header-container ">
        <!--ШАПКА-->
        <header class = "headerNav clearfix ">
            <div class="logo">
                <a href="/">SHITNEWS</a>
            </div>
            <div class="menu">
                <ul class="navigation">
                    <li><a href="">item-1</a></li>
                    <li><a href="">item-2</a></li>
                    <li><a href="">item-3</a></li>
                </ul>
            </div>
            <div class="LogReg">
                <ul>
                    <li><a href="">Login</a></li>
                    <li><a href="">Registrer</a></li>
                </ul>
            </div>
     </header>    
 </div>   
</body>
</html>

@Dmitri446 · 23.08.2016, 13:00 **[ТС]**

Fedor92, спасибо, теперь всё как надо

Добавлено через 4 минуты
Может кому-нибудь пригодится

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
<div class = "header-container clearfix">
     <!--ШАПКА-->
     <header class = "headerNav clearfix ">
            <div class = "shit">
                <ul><li><a href = ""><h1>SHITNEWS</h1></a></li></ul>
            </div>
         
            <div class = "navigation">
                <ul >
                    <li>
                        <a href = "">News</a>
                        <ul class = "sub-menu">
                            <li><a>HotNews</a></li>
                            <li><a>Archive</a></li>
                            <li><a>Trash</a></li>
                        </ul>
                    </li>
                    <li><a href = "">Forum</a></li>
                    <li><a href = "">Blog's</a></li>
                </ul>
           </div>
         
            <div class = "LogReg ">
                    <ul>
                        <li><a href = "">Login</a></li>
                        <li><a href = "">Register</a></li>
                    </ul>
            </div>
         
     </header>    
   
      
    </div>

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.header-container{
 
margin:0;
padding:0;
width:100%;
background-color:white;
position:fixed;
top:0;
border-bottom:1px solid #d8d8d8;
box-sizing: border-box;
z-index:1;/*чтобы был поверх всех слоёв*/
}
 
 
 
.shit{
    float:left;
    width:15%;
    text-align: left
}
.headerNav div,li{
    display:inline-block;
}
 
.navigation li{
    text-align: center;
    display: inline-block; 
}
.navigation{
    position:relative;
    width:70%;
}
.headerNav{
    text-align: center;
    box-sizing: border-box;
}
 
.LogReg{
    float:right;
    width:15%;
    text-align: right;
}
 
 .headerNav{
box-sizing: border-box;
display:block;
}
 
.headerNav a{
    display:inline-block;
   padding:20px;
    text-decoration: none;
}
.headerNav a:hover{
    background:#efefef;
}
 
.sub-menu{
    position:absolute;
   text-align: left;
   background: white;
    border-radius:1px; 
    display:none;
}
.sub-menu li{
    display:block;
    text-align: left;
    
}
.sub-menu a{
    padding:10px;
    width:100px;
    border-radius:1px;
}
li:hover .sub-menu{
    display:block;
}

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	22.08.2016, 19:45
	Естественно не по центру. У Вас центр формируется между "SHITNEWS" и "Login" 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.08.2016, 19:46
	Dmitri446, как Вы вообще догадались три разных объекта воткнуть в один список? Сделайте функциональную разбивку блок с лого, блок меню и блок авторизации и выравнивайте их... Зачем к ходулям приделывать костыли? 0

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	23.08.2016, 12:07 [ТС]
	Fedor92, ну так у вас вышло тоже самое что и у меня, основной блок навигации не поцентру, он стоит по центру между левым и правым блоком, а как сделать так чтобы он был по центру самой шапки(header) 0

Выравнивание блоков меню навигации

Решение