Question

我有以下HTML：

<ul class="navlist">
    <li><a href="index.html">Home</a></li>
    <li><a href="agenda.html">Agenda</a></li>
    <li><a href="presenters.html">Presenters</a></li>                       
</ul>

我正在使用这个CSS：

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li a {   
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}

.navlist li {display: inline;}

作为shown in a fiddle，li元素之间有空格。如何删除该空格？

Answer 1

在HTML中，删除每个结束标记</li>和开始标记<li>之间的所有空格。此外，在列表项上设置display: inline-block。

演示：

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li {
    display: inline-block;
}

.navlist li a {
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}

<ul class="navlist">
    <li><a href="index.html">Home</a></li><li>
        <a href="agenda.html">Agenda</a></li><li>
        <a href="presenters.html">Presenters</a></li>						
</ul>

Answer 2

原因是您将LI设置为inline元素，空格是由html代码</li>和<li>之间的“空格”/换行符引起的。

我们通常会改为LI float: left：

http://jsfiddle.net/Lsbwt0n8/3/

Answer 3

在这种情况下，您只需添加

即可

.navlist li:after { content: ' '; font-size:0; }

li元素之间的空白区域将折叠为伪元素，其字体大小为0，因此不会呈现间隙。

.navlist {  
padding: 10px 0 0;
margin :0;
list-style-type: none;
height:33px;
}

.navlist li a {   
text-decoration: none;
font-size:18px;
color:white;
background:#63B3E4;
padding: 10px 45px 12px;
}

.navlist li a:hover {
color:#63B3E4;
background:white;}

.navlist li {display: inline;}

.navlist li:after { content: ' '; font-size:0; }

<ul class="navlist">
    <li><a href="index.html">Home</a></li><li>
        <a href="agenda.html">Agenda</a></li><li>
        <a href="presenters.html">Presenters</a></li>						
</ul>

Answer 4

您可以通过将font-size:0添加到父

来删除空白

.navlist {
  font-size: 0;
}

.navlist {
  padding: 10px 0 0;
  margin: 0;
  list-style-type: none;
  height: 33px;
  font-size: 0;
}
.navlist li a {
  text-decoration: none;
  font-size: 18px;
  color: white;
  background: #63B3E4;
  padding: 10px 45px 12px;
}
.navlist li a:hover {
  color: #63B3E4;
  background: white;
}
.navlist li {
  display: inline;
}
.navlist {
  font-size: 0;
}

<ul class="navlist">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="agenda.html">Agenda</a>
  </li>
  <li>
    <a href="presenters.html">Presenters</a>
  </li>
</ul>

Answer 5

要删除空格，必须删除空白区域。

<ul class="navlist">
    <li><a href="index.html">Home</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="presenters.html">Presenters</a></li>            
</ul>

http://jsfiddle.net/Lsbwt0n8/5/

我们怎样才能消除两个李之间的空间？

5 个答案: