Html 如何在导航栏中添加float属性并使其居中？

我有这个导航栏表单，但我希望它在页面中居中（水平），我希望它是完全有边框的，我不能得到它的权利。它可能与float属性有关。如果我给链接加上边框，那么每个链接都会有自己的边框；如果我给列表加上边框，那么会有一个空边框，链接在它下面。如果我把杆放在中间，那么什么也不会发生。我尝试用

display:inline属性，但它似乎与
显示：块有问题属性

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>   

a:link，a:visted{display:block；width:80px；背景色：#0066FF；文本装饰：无；字体系列：calibri；字体大小：20px；颜色：#FFFFFF；}
a:悬停{背景色：#0088FF}
li{float:左；}
ul{列表样式类型：无；文本对齐：居中；边距：0；填充：0；文本对齐：居中；}







感谢您的帮助。
使用
display:inline block
代替
float
。给你的
ul
一个固定的
width
并应用
margin:0 auto


a:link，
a:参观了{
显示：块；
宽度：80px；
背景色：#0066FF；
文字装饰：无；
字体系列：calibri；
字体大小：20px；
颜色：#FFFFFF；
}
a:悬停{
背景色：#0088FF
}
#李国荣{
显示：内联块；
}
保险商实验室{
列表样式类型：无；
文本对齐：居中；
保证金：0；
填充：0；
宽度：400px；
边框：1px纯黑；
保证金：0自动；
}
#海军ulli a{
填充物：5px10px；
}








研究下面的示例


#导航条{
宽度：100%；
高度：45px；
背景颜色：绿色；
}
#导航栏ulli{
display:inline block；/*使它们彼此相邻*/
利润率：0.30px 0.50px；
字号：18px；
线高：18px；
填充顶部：10px；
填充：10px 10px 0 10px；
}
李阿{
文字装饰：无；
}
#导航条ulli：悬停{
背景颜色：浅绿色；
高度：35px；
}







.nav集装箱李：第一个孩子{
左边框：中实心；
}
.nav集装箱李{
底边：中实心；
边缘顶部：中等固体；
}
.nav集装箱李：最后一个孩子{
右边框：中实线；
}






要在导航周围添加边框，请在父标签上添加边框：在本例中，是ul标签。这将在父标记的子标记周围放置边框

不必添加：链接和：访问，除非您希望它们具有不同的结果

将float更改为inline块，因为这会为它提供影响父标记的空间，而inline不会

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

要避免内联块之间出现空格，请将父标记（在本例中为ul）字体大小设置为0。或者在标记之间使用注释。我两个都做了，这样可以在safari中工作

使用边距：0自动；自动将图元与父标记的中心对齐：在本例中，是主体标记

使用display:table包装ul标签，以适应（包装）其内容

尽可能将css规则组合成速记：例如字体系列和字体大小到字体：（大小）（系列）


a{
显示：块；
填充：0 10px；
背景色：#0066FF；
文字装饰：无；
字体：20px calibri；
颜色：#FFFFFF；
}
a:悬停{
背景色：#0088FF；
}    
李{
显示：内联块；
}    
保险商实验室{
列表样式：无；
保证金：0自动；
填充：0；
字号：0；
边框：3px实心#00aaFF；
显示：表格；
}


您需要重新表述您的问题。你到底想完成什么，你尝试了什么，遇到了什么问题？“如何制作导航栏？”没有帮助。尽量避免使用W3C网站。众所周知，他们一半以上的东西都过时了。有很多关于谷歌搜索的教程，我的学校使用该网站作为主要来源，但我也使用其他来源。这只是一个例子。我试着去拿那个酒吧，但我希望它是居中和边缘。float属性可能会导致问题。我通常使用类而不是id。我会尝试转换它，但如果我不能，你能给我一个类的例子吗？无论如何，谢谢你的帮助。@HYBR1D-当然，但是只有一个
id
（
#nav
）。
<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>