Question

我做了一个水平无序列表，之后它似乎仍然有空间顶部和底部，当它是垂直的并且点堆叠在彼此之上。我尝试将边距设置为0并填充为0但是没有'工作。我希望空间降到0px，但我尝试过的一切都行不通。示例：http://jsfiddle.net/guineapig101/Xda8k/ Html代码：

<div class="ulContainer">
<ul class="a">
<li><span class="l" id="l1">&#183;</span></li>
<li><span class="l" id="l2">&#183;</span></li>
<li><span class="l" id="l3">&#183;</span></li>
<li><span class="l" id="l4">&#183;</span></li>
<li><span class="l" id="l5">&#183;</span></li>
<li><span class="l" id="l6">&#183;</span></li>
</ul>
</div>

css：

.ulContainer{position: absolute;top: 84%;left: 50%;margin: 0px;}
.a {list-style-type:none; position: relative; left: -50%; margin: 0px; padding: 0px;}
.a li{float: left;position: relative; margin: 0px; padding: 0px;}
.l { font-size: 100px; color: #000;  margin: 0px; padding: 0px;}
.l:hover{color: #9B9B9B !important;cursor: pointer;}

Answer 1

出现问题的原因是您用于子弹的font-size。您必须减小字体大小，并且可以使用•将其显示为项目符号。更新您的代码，如下所示。

HTML

<ul class="a">
<li><span class="l" id="l1">&bull;</span></li>
<li><span class="l" id="l2">&bull;</span></li>
<li><span class="l" id="l3">&bull;</span></li>
<li><span class="l" id="l4">&bull;</span></li>
<li><span class="l" id="l5">&bull;</span></li>
<li><span class="l" id="l6">&bull;</span></li>
</ul>

CSS

.l { font-size:40px; color: #000;  line-height:0px; height:30px; margin: 0px; padding: 0px;}

DEMO

Answer 2

我认为问题归因于line-height，因为您已将font-size设置得如此之大，影响line-height，因此您可以明确指定height和line-height一样span就像这样：

您还需要设置overflow:hidden;

  .l { 
    font-size: 100px; 
    color: #000;  
    margin: 0px; 
    padding: 0px;
    height:20px;
    line-height:20px;
    background:#ccc;
    overflow:hidden;
display:inline-block;
}

这样可以减少身高和中心弹。

见这里： http://jsfiddle.net/Xda8k/4/

Html Css水平无序列表25px左右空间顶部和底部？

2 个答案: