html – 如何将Web表单元素放在新行上?
发布时间:2020-12-26 08:18:47 所属栏目:资源 来源:网络整理
导读:如何在新行上放置“输入”元素?在以上示例中,所有元素被顺序放置,即标签 – 输入 – 标签 – 输入等. /* ----------- My Form ----------- */.myform{ margin:0 auto; padding:14px;}#stylized{ border-width:1px; border-style:solid; border-color:#b7d
如何在新行上放置“输入”元素?在以上示例中,所有元素被顺序放置,即标签 – >输入 – >标签 – >输入等. /* ----------- 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”. (编辑:常州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |