创建水平列表后如何进入下一行？

Question

如下面的屏幕截图所示，<p>元素显示在与其前面的<ul>相同的级别上。我希望将<p>元素显示在<ul>：

下面

有没有办法可以同时控制divMain内的所有元素？我希望所有三个<ul>元素和<p>元素在最左侧显示在彼此之下。

HTML code：

<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

<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 style="display:inline-block; overflow: hidden; clear: both;">This sentence should appear on a separate line. </p>
    <ul class = "verticalList">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</form> 

我不知道类的CSS，但我认为上面的代码会起作用。只是为了调试你可能想要使用！important。

Answer 2

你需要一个明确的：在浮动元素或显示之后：水平元素的内联块

Answer 3

您可以使用CSS的相对位置。 http://www.w3schools.com/css/css_positioning.asp

但是如果你想要一个响应式页面，请使用Bootstrap或Foundation。我希望能帮助你找到相对的位置......

Answer 4

form {
display: block
}

这将把DOM元素设置在另一个下面的一个

中