CSS文本格式错误

Question

我在this link 有一个页面，我试图让测试保持在一条线上

<li class="comment-item">
<a name="comment-102"></a>
    <div class="comment-buttons">
        <a href="javascript:report(102);" class="report">Report</a>
        <a href="javascript:add_vote(102);" class="vote" id="vote-102">+0</a>
        <a href="?id=127&amp;replytocom=102#respond" class="reply">Reply</a>
    </div>
    <img src="/images/avatars/default.png" height="85" width="100">
    <p class="user">nat45928</p>
    <p class="date">1 minutes ago</p>
    <p class="body">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 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;
}

.comment-item:before, .comment-item:after { 
    content: ""; display: table; 
}

.comment-item:after { 
    clear: both; 
}

.comment-item { 
    zoom: 1; 
}

.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

将此添加到p.body

margin:0 80px 0 110px;