html - 创建水平列表后如何转到下一行？

Question

如以下屏幕截图所示，<p>元素显示在与 <ul> 相同的级别在它之前。我希望<p>显示在 <ul> 下方的元素:

有没有办法可以控制divMain 中的所有元素？立刻？这三个我都想要 <ul>元素和 <p>元素在彼此下方显示到最左侧。

HTML代码:

<div class="container" id="divMain">
    <form method="post" action="add.php">
        <ul class = "verticalList">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class = "horizontalList">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p>This sentence should appear on a separate line. </p>
        <ul class = "verticalList">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </form> 
</div>

CSS 代码:

.horizontalList{
    float: left;
    display: inline;
    margin:0px;
    padding: 0;
    width: 20%;
}

Answer 1

你需要一个clear:both after the floating elements or display:inline-block for the horizo​​ntal elements