Css панель навигации (CSS и HTML) вопрос

Question

Итак, у меня есть эта панель навигации:

Я хочу поставить рамку вокруг него, но он становится больше, что я не люблю:

Я пытаюсь установить высоту панели навигации, но ссылки не подходят больше, и нет никакого способа, чтобы положить их обратно в:

Просьба помочь.

код (CSS):

#navigation { 
    margin: 0 auto; 
    background-color: #FFFFFF; 
    //font-family: lkth; 
    border: double; 
    border-width: 5px; 
    border-color: #663D07; 
    border-radius: 10px; 
    height: 40px; 
} 
#navLi { 
    display: inline-block; 
    margin-right: 10px; 
} 
.navA { 
    color: #000000; 
} 

Код (HTML):

<div id="navigation"> 
    <ul id="navUl"> 
     <li id="navLi"><a class="navA" href="#"><p>Page d'accueil</p></a></li> 
     <li id="navLi"><a class="navA" href="#"><p>Evénements</p></a></li> 
     <li id="navLi"><a class="navA" href="#"><p>Contactez nous</p></a></li> 
    </ul> 
</div> 

Edit: Я получаю это, если я отображать navLi в виде блока и навигации как встроенный блок:

Answer 1

Самый простой вариант можно было бы добавить к box-sizing: border-box;#navigation, но вы также можете попробовать использовать margin:-5px;. Я исправил семантику вашего примера и добавил margin:-5px. Надеюсь это поможет.

#navigation { 
 
    margin: 0 auto; 
 
    background-color: #FFFFFF; 
 
    //font-family: lkth; 
 
    border: double; 
 
    border-width: 5px; 
 
    border-color: #663D07; 
 
    border-radius: 10px; 
 
    height: 40px; 
 
    list-style-type:none; 
 
} 
 
#navigation ul { 
 
    margin:-5px; 
 
} 
 
#navigation li { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
#navigation a { 
 
    color: #000000; 
 
}

<div id="navigation"> 
 
    <ul> 
 
    <li><a href="#"><p>Page d'accueil</p></a></li> 
 
    <li><a href="#"><p>Evénements</p></a></li> 
 
    <li><a href="#"><p>Contactez nous</p></a></li> 
 
    </ul> 
 
</div>

Answer 2

Попробуйте установить box-sizing: border-box; на навигацию. Таким образом, граница не должна дополнять размеры блока.

#navigation { 
    margin: 0 auto; 
    background-color: #FFFFFF; 
    /* font-family: lkth; */ 
    border: double; 
    border-width: 5px; 
    border-color: #663D07; 
    border-radius: 10px; 
    height: 40px; 
    box-sizing: border-box; 
} 

Answer 3

Вот код отредактирован:

#navigation { 
    margin: 0 auto; 
    background-color: #FFFFFF; 
    border: double; 
    border-width: 5px; 
    border-color: #663D07; 
    border-radius: 10px; 
    height: 40px; 
} 
#navUl{ 
margin: 0 auto; 
width: 500px; 
padding-top: 10px; 
} 
#navLi { 
    display: inline-block; 
    height: 40px; 
} 

<div id="navigation"> 
    <ul id="navUl"> 
     <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li> 
     <li id="navLi"><a class="navA" href="#">Evénements</a></li> 
     <li id="navLi"><a class="navA" href="#">Contactez nous</a></li> 
    </ul> 
</div> 

Answer 4

Вы могли бы сделать что-то вроде этого:

#navigation { 
 
    margin: 0 auto; 
 
    background-color: #FFFFFF; 
 
    //font-family: lkth; 
 
    border: double; 
 
    border-width: 5px; 
 
    border-color: #663D07; 
 
    border-radius: 10px; 
 
    height: 40px; 
 
    display: block; 
 

 
} 
 
#navigation li { 
 
    margin: 0 10px 0 0; 
 
    float: left; 
 
    padding: 0; 
 
    list-style: none; 
 
    line-height: 10px; 
 

 
} 
 
#navigation a { 
 
    color: #000000; 
 
}

<div id="navigation"> 
 
    <ul id="navUl"> 
 
     <li><a href="#">Page d'accueil</a></li> 
 
     <li><a href="#">Evénement</a></li> 
 
     <li><a href="#">Contactez nous</a></li> 
 
    </ul> 
 
</div>

Вы можете настроить таргетинг на свои лики и в своей навигации напрямую, вам не нужно указывать классы для этого. Я добавил list-style: none, потому что вам не нужен ваш список с пулями. Также заменен дисплей: встроенный блок с float: слева, который в основном делает то же самое. Маржа - это сокращение для margin-top: 0px, margin-right: 10px, margin-bottom: 0px и margin-left: 0px;

Как последнее касание, линия-высота: 10px; это приводит к тому, что ваши ссылки больше посередине.

Также небольшое примечание, идентификаторы не могут использоваться более одного раза! Идентификатор всегда является уникальным, если вы хотите использовать его вместо использования класса.

Answer 5

Нет причин помещать абзацы внутри тега ссылки.
Тег абзаца по умолчанию имеет некоторый запас, который делает навигационную панель выше.
Также неупорядоченный список имеет разницу по умолчанию, что делает ее еще более высокой.
Таким образом, самым простым способом было бы удалить тег абзаца.
Даже если этого недостаточно, вы можете удалить поле неупорядоченного списка.
Взгляните на этот JSFiddle:

#navigation { 
 
    margin: 0 auto; 
 
    background-color: #FFFFFF; 
 
    //font-family: lkth; 
 
    border: double; 
 
    border-width: 5px; 
 
    border-color: #663D07; 
 
    border-radius: 10px; 
 
} 
 
#navLi { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
/* #navUl { 
 
    margin: 0; 
 
} */ 
 

 
/* If thats not enought you can uncomment the above code */ 
 
.navA { 
 
    color: #000000; 
 
}

<div id="navigation"> 
 
    <ul id="navUl"> 
 
     <li id="navLi"><a class="navA" href="#">Page d'accueil</a></li> 
 
     <li id="navLi"><a class="navA" href="#">Evénements</a></li> 
 
     <li id="navLi"><a class="navA" href="#">Contactez nous</a></li> 
 
    </ul> 
 
</div>