Question

我正在尝试排队李，所以他们堆叠。除了如何说出我的问题之外我遇到的问题是如何获得lis所以每个li下的空间是相同的。在我的左侧，我得到大的间距，如：

---------------
CONTENT
---------------




---------------
MORE CONTENT
---------------

在我的右边，我有

---------------
RIGHT CONTENT
---------------

---------------
MORE RIGHT CONTENT
---------------

我想这样做左侧适合右侧。似乎左侧坚持右侧如何堆叠。

---------------            ---------------
LEFT CONTENT               RIGHT CONTENT
---------------            
                           ---------------

---------------            ---------------
MORE LEFT CONTENT          MORE RIGHT CONTENT
---------------            ---------------

CSS：

#l, img{
    width: 400px;
    background-color: rgba(144,144,144,.3);
    box-shadow: 0px 0px 15px black;
    vertical-align: top;
    position: relative;
    float: right;
    }
dl{
    color: yellow;
    font-size: 30px;
    }
li {
    float: left;
    list-style-type: none;
    padding-left: 50px;
    }
li a {
    float: left;
    margin: 0 5px;
    width: 80px;
    height: 100px;
    }

HTML：

<li class="searchable" data-index="NAME"><dl>
    <dt><img class="l" src="IMAGE"></dt>
    <dt>NAME</dt></dl></li>

结果我正在寻找：

---------------            ---------------
LEFT CONTENT               RIGHT CONTENT
---------------            ---------------

---------------            ---------------
MORE LEFT CONTENT          MORE RIGHT CONTENT
---------------            ---------------

〜Xplo

Answer 1

您可以为班级应用填充样式：

li.searchable{padding-bottom:20px;}

我认为它是正确的类。。

Answer 2

我没有在代码中看到任何div，但你可以设置他们的位置：absolte，根据你的意愿设置他们的顶部和左边。访问this link非常有用，但我只是告诉您更多地了解它。

如何制作lis堆栈（没有垂直间距）

2 个答案: