html - CSS - 流程中断问题

Question

我在问题详细信息中解释了我的问题。对于问题标题，我很抱歉，我找不到更清晰的内容。

我希望我的所有行都对齐(包括第三行和第四行等)，但它们没有。我的 img 没有断线，所以我想我应该清除左边的部分，但我不明白。

缺少什么？

HTML

<div id="main">
    <div class="comments-comments">
        <div id="comment-1">
            <ul>
                <li>
                    <div class="user-img-sub"><img class="user-avatar-sub"
                                                   src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-17.jpg"/>
                    </div>
                </li>
                <li>
                    <div class="user-name-sub"><a href="">John Doe</a></div>

                </li>
                <li id="comment-1-itself">Hello Stackoverflow! I hope I can get an answer for this question! As you can
                    see, starting from the third
                    line, I am experiencing this flow issue with CSS.
                </li>

            </ul>
        </div>
    </div>
</div>

CSS

#main {
    width: 400px;
    min-height: 200px;
    border: 1px solid black;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}

.comments-comments {
    width: 100%;
    border: 1px solid black;
    min-height: 50px;
    padding: 5px 0 20px 10px;
}

#comment-1 ul {
    margin: 5px 5px 0 5px;
    padding: 0;
}

#comment-1 ul li {
    list-style-type: none;
    display: inline;
}

.user-avatar-sub {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    float: left;
}

.user-name-sub {
    float: left;
    margin: 0 0 0 3px;
    font-size: 14px;
}

#comment-1-itself {
    margin-left: 3px;
    padding: 0;
}

Answer 1

基本上，我在评论本身中添加了填充。 内边距:90px; 并将 li 更改为 display: block;

这是 fiddle :

http://jsfiddle.net/9wcs3nu2/