html - 使用显示: inline-block; HTML CSS时出现添加框

Question

使用display: inline-block时出现Addition box； HTML CSS，这是在 CSS 上的 ul li a 标签内，不确定如何摆脱它创建的额外框，创建另一个 li 标签会导致出现另一个框而不是填充空框。

问题链接: http://imgur.com/a/gsHGh代码链接: http://imgur.com/a/ED7F0

CSS:

nav{
margin: 0px;
padding: 0px;
text-align: center;
background-color:black;
width: 800px;
height: 50px;
}

nav ul{
list-style-type: none;
margin: 0px;
padding: 10px;
}

nav ul li {
display: inline;
margin: 0px;
padding: 0px;
}

nav ul li a{
background-color: white;
color: black;
display: inline-block;
width: 100px;
height: 20px;
text-decoration: none;
text-align: center;
padding-top: 5px;
font-family: Arial;
margin: 0 auto;
border-radius:99px 99px 99px 99px;
width: 25%;
float: left;
}

HTML:

<ul>
<li><a href='index.html'>Home</a>
<li><a href='about.html'>About<a>
<li><a href='contact.html'>Contact</a>
<li><a href='http://www.uroulette.com/visit/ootrwu' target='_blank'>Random</a>
</ul>

Answer 1

您还没有关闭<a>关于标签，行尾应该有</a>而不是 <a> .因此，您没有关闭标签，而是多了一个标签。