Question

使用display时出现添加框：inline-block; HTML CSS，这是在CSS上的标签内，不确定如何摆脱它创建的额外框，创建另一个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>。因此，不是关闭标签而是另外一个。

Answer 2

由于@Mr_KoKa指出您未关闭a代码，因此您并未关闭任何li代码

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

使用display时出现添加框：inline-block; HTML CSS

2 个答案: