Question

如何在新行上放置“输入”元素？在上面的示例中，所有元素按顺序放置，即标签 - >输入 - >标签 - >输入等。

/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    padding:14px;
}
#stylized{
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:right;
    float:left;
}
#stylized input{
    float:left;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */

    <div id="stylized" class="myform">
        <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <label>Name: </label>
        <input type="text" name="name" id="name"/>
        <label>Email: </label>
        <input type="text" name="email" id="email"/>
        <label>Password: </label>
        <input type="text" name="password" id="password"/>
        </form>
    </div>

Answer 1

#stylized input{
    display: block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

这会将每个输入放在一个新行上。 - 删除了“float：left”，添加了“display：block”。

Answer 2

我的猜测是user1359163的anwswer会有所帮助，尽管您可能想知道原因：使用float有效地从文档的正常流程中删除元素，有点像更改z-index，允许元素流过div边框，标签，跨度和......'忽略'clear样式。

该元素的行为就像它漂浮在其他元素上一样，因此在这方面，它保持清除所有其他不浮动的元素的左侧和右侧。我不是CSS专家，但这种看待它的方式帮助我解决了使用float，clear和z-index样式时遇到的错位布局问题

Answer 3

我将它们放在列表标签下，并且无需更改样式即可使用，并且使用break标签已过时

<ul>
   <li><input type = "text" name = "selection" value = "text1" /> Text1</li>
   <li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>

Answer 4

您是否尝试过像

这样简单的事情

<label>Name: </label><br>
        <input type="text" name="name" id="name"/> 
        <label>Email: </label><br>
        <input type="text" name="email" id="email"/>

Answer 5

以下是JsFiddle ......

编辑：

#stylized label{
    font-size:11px;
    font-weight:bold;
    text-align:right;
}
#stylized input{
    display:block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

Answer 6

在选择具有足够空间容纳所有元素的浮动布局时，可以防止换行。

试试这个：

<强>示例 http://jsfiddle.net/8yZff/

#stylized label{
    font-size:11px;
    font-weight:bold;
    text-align:right;
}
#stylized input{
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
    display: block;
}

Answer 7

对于表格数据，例如标签/字段对数组，请使用table。你会发现造型更容易，外观也更好。

如何将Web表单元素放在新行上？

7 个答案: