Как опустить и опустить панель навигации с поплавочным свойством?

Question

У меня есть эта панель навигации w3schools, но я хочу, чтобы она была сосредоточена на странице (по горизонтали), и я хочу, чтобы она была полностью граничена, и я не могу понять ее правильно. Вероятно, это имеет какое-то отношение к свойству float. Если я обмениваюсь ссылками, каждая ссылка получает свою собственную границу, и если я очерчу список, тогда будет пустая граница, а ссылки будут ниже. Если я центрирую панель, ничего не происходит. Я попытался заменить свойство float свойством display: inline;, но у него, похоже, проблемы с свойством display: block;.

a:link, a:visited {display: block; width: 80px; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF;}  
a:hover {background-color: #0088FF}  
li {float: left;}  
ul {list-style-type: none; text-align: center; margin: 0; padding: 0; text-align: center;}  

<ul> 
<li><a href="index.html">Welkom</a></li>  
<li><a href="agenda.html">Agenda</a></li>  
<li><a href="foto's.html">Foto's</a></li>  
<li><a href="contact.html">Contact</a></li>  
</ul> 

Я ценю вашу помощь.

Answer 1

Вместо этого display: inline-blockfloat. Дайте ul фиксированным width и примените margin: 0 auto.

a:link, 
 
a:visited { 
 
    display: block; 
 
    width: 80px; 
 
    background-color: #0066FF; 
 
    text-decoration: none; 
 
    font-family: calibri; 
 
    font-size: 20px; 
 
    color: #FFFFFF; 
 
} 
 
a:hover { 
 
    background-color: #0088FF 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 400px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
} 
 
#nav ul li a { 
 
    padding: 5px 10px; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="index.html">Welkom</a> 
 
    </li 
 
    ><li><a href="agenda.html">Agenda</a> 
 
    </li 
 
    ><li><a href="foto's.html">Foto's</a> 
 
    </li 
 
    ><li><a href="contact.html">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Исследование на примере ниже.

#nav-bar { 
 
    width: 100%; 
 
    height: 45px; 
 
    background-color: green; 
 
    } 
 

 
#nav-bar ul li { 
 
    display: inline-block; /* Gets them to stay next to each other */ 
 
    margin: 0 30px 0 50px; 
 
    font-size: 18px; 
 
    line-height: 18px; 
 
    padding-top: 10px; 
 
    padding: 10px 10px 0 10px; 
 
    } 
 

 
li a { 
 
    text-decoration: none; 
 
    } 
 

 
#nav-bar ul li:hover { 
 
    background-color: lightgreen; 
 
    height: 35px; 
 
    
 
    }

<div id="nav-bar"> 
 
    
 
<ul> 
 
<li><a href="index.html">Welkom</a></li>  
 
<li><a href="agenda.html">Agenda</a></li>  
 
<li><a href="foto's.html">Foto's</a></li>  
 
    
 
</ul> 
 
    
 
    </div><!-- End Nav Bar -->

Примечание: Это лишь простой пример. Когда вы поймете, как это делается, вы можете уточнить.

Answer 3

<style> 
.nav-container li:first-child { 
border-left: medium solid; 
} 

.nav-container li { 
border-bottom: medium solid; 
border-top: medium solid; 
} 

.nav-container li:last-child { 
border-right: medium solid; 
} 
</css> 

<ul class="nav-container"> 
<li><a href="index.html">Welkom</a></li>  
<li><a href="agenda.html">Agenda</a></li>  
<li><a href="foto's.html">Foto's</a></li>  
<li><a href="contact.html">Contact</a></li>  
</ul> 

Answer 4

Чтобы добавить границу вокруг навигации, добавьте границу к родительскому тегу: в этом случае тег ul. Это помещает границу вокруг тегов детей родительского тега.

Нет необходимости добавлять ссылку и: посещать, если вы не хотите, чтобы у них были разные результаты.

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

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

Чтобы избежать пробелов между встроенными блоками, установите родительский тег, в этом случае ul, font-size равным 0. Или используйте комментарии между тегами. Я сделал так, чтобы он работал на сафари.

Использовать маржу: 0 авто; для автоматического выравнивания элементов в центре родительского тега: в этом случае тег тела.

Используйте display: table, чтобы обернуть тег ul, чтобы он соответствовал его содержимому.

Объединяйте правила CSS в стенограмме, когда это возможно: например. font-family и font-size to font: (size) (family).

a { 
 
    display: block; 
 
    padding: 0 10px; 
 
    background-color: #0066FF; 
 
    text-decoration: none; 
 
    font: 20px calibri; 
 
    color: #FFFFFF; 
 
} 
 

 
a:hover { 
 
    background-color: #0088FF; 
 
}  
 

 
li { 
 
    display: inline-block; 
 
}  
 

 
ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font-size: 0; 
 
    border: 3px solid #00aaFF; 
 
    display: table; 
 
}

 <ul> 
 
      <li><a href="index.html">Welkom</a></li><!-- 
 
      --><li><a href="agenda.html">Agenda</a></li><!-- 
 
      --><li><a href="foto's.html">Foto's</a></li><!-- 
 
      --><li><a href="contact.html">Contact</a></li>  
 
     </ul>