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

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

这是小提琴：

http://jsfiddle.net/9wcs3nu2/

Answer 2

驯兽师，排在左边？或内联，即一个接一个？

我假设你要求他们排队：

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

#comment-1 ul li {
    width: 100%; // you can make then the same width as parent elements
    position: relative; // don't need float if you make them the same width
    float: left;
    // list-style-type: none; // would place this in ul above
    // display: inline; // display inline would collapse borders so use use display block or inline-block
}

如果你正在找他们排队，那么：

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

#comment-1 ul li {
    width: 25%; // you can make then the same width as parent elements
    position: relative;
    float: left;
    // list-style-type: none; // would place this in ul above
    // display: inline; // display inline would collapse borders so use inline-block
}

Answer 3

尝试为两个li

分配一个新的div

 <div class="image">
            <li>
                <div class="user-img-sub">
                <img class="user-avatar-sub" src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-17.jpg"/>
                </div>
            </li>
            </div>
            <div class="text">
            <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>
            </div>

fiddle Here

CSS - Flow break问题

3 个答案: