div中ul和p之间的垂直空间答案

【问题标题】：Vertical space between ul and p in a divdiv中ul和p之间的垂直空间
【发布时间】：2014-07-16 15:03:24
【问题描述】：

我有一个具有如下样式的类的 div。

.testclass{
    display:inline-block;
    border:1px #efefef solid;
    clear:both;
    float:left;
    margin:0 0 25px;
    padding:25px 20px 20px;
}
.testclass p{
    font-size:12px;
    color:#666;
    margin:0;
    padding:0 0 20px;
 }
.testclass ul{
    list-style:outside;
    list-style-image:url(/images/img/bullet.png);
    margin:0 0 0 20px;
    padding:0 0 20px;
}
.testclass li{
    font-size:12px;
    color:#666!important;
    padding:0 0 10px;
}

<div class="testclass" style="padding-top:5px">
    <p>blah blah</p>
    <ul>
        <li>one</li>
    </ul>

我有一个页面，其中 div 容器具有段落和 ul。我在 ul 和段落之间有一个垂直空间。如何摆脱垂直空间。附上一张图片。

【问题讨论】：

好吧，你在段落上有填充，这就是原因。我们看不到图像，也许我错过了什么
我重新添加了图像。我尝试制作 padding:0 0 0 仍然没有工作。
你介意提供一个小提琴吗？
jsfiddle.net/d3WZ3 这是小提琴，这里显示正确，但在我的页面中，底部段落显示垂直于列表项。

标签： html css

【解决方案1】：

你的 p 元素有底部填充：

.testclass p{font-size:12px;color:#666;margin:0;padding:0 0 **20px**;}

只需将其设置为 0。这是FIDDLE

【讨论】：

【解决方案2】：

试试

.testclass li{
  font-size:12px;
  color:#666!important;
  padding:0 0 20px;
  margin-top: -10px
}

你可以改变margin-top的值来得到你想要的结果。

Fiddle

这有帮助吗？

【讨论】：

我尽量不投反对票，但这是一个创可贴的解决方案，而不是解决实际原因。
@joshboley，很抱歉你不喜欢它。我只是想提供帮助并提供可能的解决方案。视觉结果可能是提问者想要的，如果不是，他可以不使用它。我会赞成你的回答，因为我认为结果与他想要的一样