如何删除li css之间的垂直间距

Question

我有这个 html 代码和样式“这只是一个例子”：

<div id="mn" style="margin-top:200px;">
                <div class="first">1</div>
                <div class="second">2</div>
                <div class="third">3</div>
                <div class="fourth">4</div>
            </div>

<style type="text/css">
        #mn, #mn div { display:inline-block; vertical-align:middle; }
        #mn div { width:350px; margin:5px; /* float:left Comment */ }
        div.first { height:5px; background-color:Red; }
        div.second { height:120px; background-color:#999 }
        div.third { height:50px; background-color:Yellow }
        div.fourth { height:180px; background-color:#ccc }
    </style>

问题是，左边的元素“黄色和红色”之间有很大的空间或底部边距。 我需要删除这个大的边距或间距，并在所有元素中只使用 5px。

我用 jquery 创建了一个脚本，它获取列表并将它们移动到一个 div，类似这样：

<div id="mn_left"></div>
            <div id="mn_right"></div>
            <div id="mn" style="margin-top:200px;">
                <div class="first">1</div>
                <div class="second">2</div>
                <div class="third">3</div>
                <div class="fourth">4</div>
            </div>

$(document).ready(function () {            
            $("div", "#mn").each(function (e, value) {
                if ($("#mn_left").height() <= $("#mn_right").height()) {
                    $("#mn_left").append(value.outerHTML);
                }
                else {
                    $("#mn_right").append(value.outerHTML);
                }
            });
        });

脚本运行良好，但我想不使用脚本。

编辑... 我弄错了，我把 li 改成了 div ……但它完全一样。 Html 看起来像这样：

http://postimg.org/image/dh6dwdjc1/

我真正想要的是这个

http://postimg.org/image/otnkrwhep/

Answer 1

首先，这是您使用列表标记正确设置的代码，因为您说它是一个列表：

HTML：

<ul id="mn">
    <li class="first">1</li>
    <li class="second">2</li>
    <li class="third">3</li>
    <li class="fourth">4</li>
</ul>

CSS：

#mn {padding:0; margin:0;}
#mn, #mn li { display:inline-block; vertical-align:middle; }
#mn li { width:350px; margin:5px; }
li.first { height:5px; background-color:Red; }
li.second { height:120px; background-color:#999 }
li.third { height:50px; background-color:Yellow }
li.fourth { height:180px; background-color:#ccc }

• (JSFiddle Link 1)

然后，从#mn li 中删除margin：

#mn li { width:350px; /* margin:5px; */ }

• (JSFiddle Link2 )

您会看到列表项现在是齐平的，除了第一个项目，其中行高高于项目高度。要解决第一个问题，请将列表项指定为 overflow:hidden;，并将 display 从 inline-block 更改为 block。

#mn, #mn li { display:block; vertical-align:middle; }
#mn li { width:350px; overflow: hidden;}

• (JSFiddle Link 3)

这应该是给你的，除非我误解了。

Answer 2

这个怎么样？使用浮动而不是绝对定位。

#mn {width: 720px;}
#mn div { width:350px; float:left; margin:5px; }
#mn div.second {float:right;}
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999; }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }

• 全部向左浮动。
• 为包含 div 的内容添加了新的 CSS 规则 #mn。宽度等于每个子 div 的宽度加上它的 边距，所以( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px。
• 为第二个 div 添加了新的 CSS 声明。

Answer 3

现在我明白你想要做什么了......

一种方法是为将在第二列中的项目创建一个类：

#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;}

JSFiddle Example。 （PS，你需要#mn{position:relative;}以上的工作。）

这样做的问题是，如果您在第二列中有多个项目，则必须为第二个（以及第三、第四等）项目指定一个自定义 top 位置，以便它们正确排列.

这似乎是使用 Javascript 而不是 CSS 的理想场所。这来自“尽可能始终使用 CSS！”的支持者！