Question

我想创建一个两列列表，从左到右然后向下填充项目。问题是当多行项目出现在右侧时，我会得到不需要的间距。注意'Big Coffee'左边的空间。由于“大咖啡”分为两行，左栏中“茶”上面的空间太大。我想摆脱它，只用3％的保证金叠加它。

如何在没有这些额外间距的情况下将下面的列表项堆叠在另一个上面？下面是我的html示例代码

<html>
<head>
<title>Sample Page</title>
<style>
li{
    float: left;
    width: 40%;
    display: block;
    margin: 3%;
    background: beige;
}
.list_container{
width:200px;
}

</style>
</head>
<body>
<div class="list_container">
	<h2>Sample List</h2>
 	<ul >
 		<li>Coffee new coffee new</li>
		<li>Tea</li>
		<li>Milk</li>
 		<li>Big Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
 		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
    	</ul>

 

</div>
</body>
</html>

以下是屏幕截图

Answer 1

只需将margin值更改为您需要的值，例如：

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3% 0;
    background: beige;
}

＆＃13;

<html>
<head>
<title>Sample Page</title>
<style>
li{
    float: left;
    width: 40%;
    display: block;
    margin: 3% 0;
    background: beige;
}
.list_container{
width:200px;
}

</style>
</head>
<body>
<div class="list_container">
	<h2>Sample List</h2>
 	<ul >
 		<li>Coffee new coffee new</li>
		<li>Tea</li>
		<li>Milk</li>
 		<li>Big Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
 		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
    	</ul>

 

</div>
</body>
</html>

＆＃13;

希望我帮助过。

Answer 2

使用此jquery代码以摆脱特定空间。

$('li').each(function() {
   var li = $(this).height();
   if(li > 18) {
     $(this).next("li").css({"margin-top":"0","margin-bottom":"0"});
   }
});

Answer 3

您应该在您的财产“保证金”中清楚地指明您想要摆脱哪个空间。

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3%; /* this will just create 3% equal spacing in top, right, bottom, left */
    background: beige;
}

保证金属性

保证金：[top] [right] [bottom] [left]

e.g。

li {
   float: left;
   width: 40%;
   display: block;
   margin: 3% 0 3% 0; /* This will create 3% margin in top and bottom and 0 in right and left */
   background: beige;
}

保证金：10px 5px 15px 20px;

上边距为10px
右边距是5px
下边距为15px
左边距为20px

保证金：10px 5px 15px;

上边距为10px
左右边距为5px
下边距为15px

保证金：10px 5px;

上下边距为10px
左右边距为5px

<强>余量：10px的;

所有四个边距均为10px

有关详细信息，请参阅此source。

Answer 4

Cou可以将width更改为50%，将margin更改为3% 0。

最终的CSS代码是：

li {
    float: left;
    width: 50%;
    display: block;
    margin: 3% 0;
    background: beige;
}

希望有所帮助

两列无序列表中的不需要的间距

4 个答案: