Question

由于某些未知原因，我无法在垂直li条目之间留出空格。代码如下：

屏幕截图 enter image description here

HTML 的

<div id="listing">
    <ul id="entries">
        <li class="entry">
            <div>
                <div class="image">
                    <img  width="100" height="100" src="http://neword.blog.com/files/2011/01/smartphone.jpg" alt=""/>
                </div>
                <div class="text">
                    <span class="title">Google patents 'creepy' internet toys to run the home</span>
                     <span class="author">by <span class="name"><a href="">Adnan</a></span></span>
                    <span class="hi">
                        Google's R&D team has looked into making internet-connected toys that control smart home appliances.
                    </span>
                </div>
            </div>
        </li>
        <li class="entry">
            <div>
                <div class="image">
                    <img  width="100" height="100" src="http://neword.blog.com/files/2011/01/smartphone.jpg" alt=""/>
                </div>
                <div class="text">
                    <span class="title">Google patents 'creepy' internet toys to run the home</span>
                     <span class="author">by <span class="name"><a href="">Adnan</a></span></span>
                    <span class="hi">
                        Google's R&D team has looked into making internet-connected toys that control smart home appliances.
                    </span>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

html,body
{
    padding: 0;
    margin: 0;
    font-family: "Georgia", Times, serif;
    background-color: #f6f7f7;
}
a
{
    text-decoration: none;
    color: #373d39;

}
a:hover
{
    text-decoration: underline;
}
#container
{
    padding: 1%;
}
#container header
{
    margin-top: 10%;
    margin-left: 38%;
}
#container header h2
{
    margin-left: 5%;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    margin: 0;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
}
#container nav
{
    display: block;
    float: right;
    margin-right: 3%;
    width: 20%;
}
#container nav a
{
    margin-right: 5%;
}
#container #content
{
    margin: 5%;
    padding: 1%;
}
#container #listing
{
    margin-top: 5%;
}
#container #listing ul
{
    padding: 0;
    list-style: none;
}

.entry
{
    margin-top: 10px;
    border:1px solid grey;
}
#container #listing ul .entry .image
{
    float: left;
    background-color: #008000;
}
#container #listing ul .entry .text
{
    float: left;
    margin-left: 1%;
}
#container #listing ul .entry .text .title
{
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}
#container #listing ul .entry .text .author
{
    font-size: small;
}
#container #listing ul .entry .text .author .name
{
    color: #a4a7ab;
}
#container #listing ul .entry .text .hi
{
    display: block;
    color: #53555a;
}

Answer 1

我认为灰色边框是OP想要的。

    .entry {
    margin-top: 10px;
    border:1px solid grey;}

尝试

.entry{    
display: block;
Float:left;
margin-top: 10px;
border:1px solid grey;}

然后在UL容器上clear:both;。

Answer 2

您是否可以提供指向存在此问题的网页的链接。我们无法使用您的代码重现此问题。

margin-bottom: 10px;

和其他相关的CSS工作对我们来说很好。

示例：lifecycle callback

无法在<li>项目之间创建垂直空间

2 个答案: