12

如何在新行上放置“输入”元素？在上面的例子中，所有元素都是按顺序放置的，即lable->input->lable->input等。

/* ----------- 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>
4

7 回答 7

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

这会将每个输入放在一个新行上。- 删除“浮动：左”，添加“显示：块”。

于 2012-04-27T10:55:06.340 回答
2

我将它们放在列表标签​​下，它可以在不改变样式的情况下工作，并且使用中断标签已过时

<ul>
   <li><input type = "text" name = "selection" value = "text1" /> Text1</li>
   <li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>
于 2019-02-23T19:23:01.977 回答
1

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

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

于 2012-04-27T11:01:10.820 回答
1

您是否尝试过任何简单的事情

<label>Name: </label><br>
        <input type="text" name="name" id="name"/> 
        <label>Email: </label><br>
        <input type="text" name="email" id="email"/>
于 2012-04-27T10:53:27.663 回答
0

这是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;
}​
于 2012-04-27T10:56:11.060 回答
0

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

尝试这个：

示例 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;
}
于 2012-04-27T10:56:58.343 回答
0

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

于 2012-04-27T14:17:42.913 回答