如何使用浮动属性对导航栏进行边框和居中？

Question

我有这个导航栏表单 w3schools，但我希望它在页面中居中（水平），我希望它完全加边框，但我无法正确处理。它可能与 float 属性有关。如果我给链接加边框，那么每个链接都有自己的边框，如果我给列表加边框，那么有一个空边框，链接在它下面。如果我将酒吧居中，则不会发生任何事情。我试过用display: inline; 属性替换float 属性，但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-block 代替float。给你的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 标签。这会在父标签的子标签周围放置一个边框。

没有必要添加 :link 和 :visited ，除非您希望它们有不同的结果。

将 float 更改为 inline-block，因为这会为其提供影响父标签的空间，而 inline 不会。

如果某些单词的长度超过 80 像素，请使用填充而不是宽度。

为了避免内联块之间的空间，设置父标签，在这种情况下ul，字体大小为0。或者在标签之间使用cmets。我都做了，所以它可以在 safari 中工作。

使用边距：0 自动；自动将元素对齐到父标签的中心：在本例中为 body 标签。

使用 display: table 包裹 ul 标签以适应（环绕）其内容。

尽可能将 css 规则组合成简写形式：例如font-family 和 font-size 到 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>