CSS中 li 之间的间隔如何取消?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中 li 之间的间隔如何取消?相关的知识,希望对你有一定的参考价值。

ul 里的 li 我把他设成display:inline 之后,两个li之间有一小段间隔,不是margin也不是padding...求助!

这是因为你把li设置成行内元素了,行内元素之间是会有一定间隙的,间隙的大小与默认的font-size设置有关,这个值越大,间隙也越大,如果你在ul层设置font-size=0,那么间隙即可去掉,但是如果ul有字体的话,也看不见了,li里面的字体可以另外设置大小。还有一种办法就是连着写代码:

<ul>
    <li>
    </li>
</ul>

这样的写法改成

<ul><li></li></ul>
或者
<ul><
li><
/li></ul>

为什么写在一行之后空隙会不见了呢?我认为原因是浏览器会解析html代码中行内元素之间的换行符,当行内元素之间没有换行符之后,间隙自然就没了。

参考技术A css中li之间有间隙,不连贯的问题:
1、首页要使用margin:0;padding:0去除浏览器的默认值;
2、然后对LI的样式进行规范定义。
例子:
<style>
*margin:0;padding:0; /*通配符margin和padding都设为0*/
.boxclear:both;width:500px;height:300px;border:1px solid #ccc
.box lifloat:left;list-style:none;text-align:left;display:inline;width:500px;height:30px;line-height:30px;border-bottom:1px solid #ccc;
</style>
<div class="box">
<ul>
<li>这里是文字一</li>
<li>这里是文字二</li>
<li>这里是文字三</li>
</ul>
</div>
参考技术B 你说的那个距离可能是空白节点,你可以把li连着写,不要换行,如;
<ul><li>qqqqqqqq</li><li>dddddddd</li></ul>
不过这样做也不是好办法,所以你可以把样式改成:
li float: left; list-style: none;追问

好像对了。。。!可是为什么我看别人换行都没有问题的= =

来自:求助得到的回答本回答被提问者和网友采纳
参考技术B 两个li之间有一小段间隔肯定是有的啊,你别忽略了一点,<li>标签是<ul>的子标签,所以你把li的属性转换为内联块之后,本身他的间距是依托于他的父类标签的。

你要把<li>的标签的间距变小,可以尝试给<ul>的长度缩小!

希望帮助到你!
参考技术C limargin:0;padding:0;list-style-type:none;

不是margin和padding那就是list-style-type没有设置了。

试试看~~

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

<!-- 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;
}

以上是关于CSS中 li 之间的间隔如何取消?的主要内容,如果未能解决你的问题,请参考以下文章

关于li标签之间的间隔如何消除!

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

css中一个li如何换行呢

css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大

当我在文件类型之间切换时,如何取消重映射?

CSS如何选择字符串最后两个字符