css 如何删除菜单中li元素之间的空格

Posted 2021-05-13

<!-- Get rid of the spaces by hand in the HTML -->
<ul>
    <li class="selectedPage"><a href="#">HOME</a></li><li><a href="#">PAGE1</a></li<li><a href="#">PAGE2</a></li>
</ul>


<!-- Use comments after each li -->
<div class="nav">
    <ul>
        <li class="selectedPage"><a href="#">HOME</a></li><!--
        --><li><a href="#">PAGE1</a></li><!--
        --><li><a href="#">PAGE2</a></li><!--
    --></ul>
<!-- end .nav --></div>

/* Use the float and clear the container */
.nav ul li {
    float: left;
  /*display: inline-block;*/
}

.nav ul {
    overflow: hidden;
}

/* Set the font size in the ul to 0px and reset it in the li */
.nav ul {
    font-size: 0;
}

.nav li {
   display: inline-block;
   font-size: 16px;
}