html – 如何将Web表单元素放在新行上?

前端之家收集整理的这篇文章主要介绍了html – 如何将Web表单元素放在新行上?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在新行上放置“输入”元素?在以上示例中,所有元素被顺序放置,即标签 – >输入 – >标签 – >输入等.
/* ----------- 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>

解决方法

#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”.

猜你在找的HTML相关文章