Question

我在this link有一个页面，我试图让评论的边框不高于图像的底部，所以我对其中一条评论的html有这个：

<li class="comment-item">
    <a name="comment-94"></a>
    <div class="comment-buttons">
        <a href="javascript:report(94);" class="report">Report</a>
        <a href="javascript:add_vote(94);" class="vote" id="vote-94">+1</a>
        <a href="?id=49&amp;replytocom=94#respond" class="reply">Reply</a>
    </div>
    <img src="/images/avatars/default.png" height="85" width="100">
    <p class="user">nat45928</p>
    <p class="date">August 3, 2011, 5:04 am</p>
    <p class="comment-body">test</p>
</li>

我将这个用于与评论项目相关联的CSS：

.comments .comment-item {
    list-style: none;
    border:2px black solid;
    border-radius:15px;
    margin: 5px 0 0 0;
    padding: 10px;
    clear:both;
    width:auto;
    height:auto;
}

.comments .comment-item * {
    margin: 0;
    padding: 0;
}

.comments .comment-item .user {
    font-family: "True Food Looks";
    letter-spacing:-2px;
    display:inline;
}

.comments .comment-item .date {
    margin-left:10px;
    display:inline;
}

.comments .comment-item img {
    float:left;
    margin-right:5px;
    border: solid black 1px;
    border-radius: 15px;
}

.comments .comment-item .comment-buttons {
    float:right;
    display:block;
    width: 80px;
    height: 70px;
}

.comments .comment-item .comment-buttons a {
    display:block;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

.comments .comment-item .comment-buttons .report {
    height: 20px;
    margin-bottom: 5px;
    background-color:#C6B784;
    border-top-left-radius: 25px 20px;
    border-top-right-radius: 25px 20px;
}

.comments .comment-item .comment-buttons .vote {
    height: 20px;
    background-color:#70675C;
    border-radius: 10px;
}

.comments .comment-item .comment-buttons .reply {
    height: 20px;
    margin-top: 5px;
    background-color:#C6B784;
    border-bottom-left-radius: 25px 15px;
    border-bottom-right-radius: 25px 15px;
}

为什么会发生这种情况，我该如何解决？

Answer 1

添加内容项目（您的LI）

min-height:95px;

在结束</li>之前

添加：

<div style="clear:both"></div>

Answer 2

.comment-item:before, .comment-item:after { content: ""; display: table; }
.comment-item:after { clear: both; }
.comment-item { zoom: 1; }

Here is the example

Answer 3

在每个.comment-body <p>下方添加一个div，如下所示：

<li class="comment-item">
    <a name="comment-93"></a>
    <div class="comment-buttons">
        <a href="javascript:report(93);" class="report">Report</a>
        <a href="javascript:add_vote(93);" class="vote" id="vote-93">+0</a>
        <a href="?id=49&replytocom=93#respond" class="reply">Reply</a>
</div>

    <img src="/images/avatars/default.png" width="100" height="85" />
    <p class="user">nat45928</p>
    <p class="date">August 3, 2011, 5:04 am</p>
    <p class="comment-body">test</p>
    <div style="clear:both;"></div>
</li>

CSS边框不适合项目权利

3 个答案: