造型与上面的标签input的forms
我想制作下面的表格样式：
姓名电子邮件 [.................] [.................] 学科 [.................] 信息 [.........................................] [.........................................] [.........................................] [.........................................]
我的HTML代码是：
<form name="message" method="post"> <section> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </section> <section> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </section> </form> 目前正在生产：
名称 [...................] 电子邮件[...................] 学科 [...................] 信息 [.........................................] [.........................................] [.........................................] [.........................................]
什么是最好的方法来做到这一点？ 我一直在糊弄我的花车！
我将input和label元素display: block ，然后拆分名称标签＆input，并将电子邮件标签＆input到div's浮动它们相邻。
HTML：
<form name="message" method="post"> <section> <div style="float:left;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> <div style="float:left;"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </div> <br style="clear:both;" /> </section> <section> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </section> </form>
CSS
input, label { display:block; }
你可以尝试类似的东西
<form name="message" method="post"> <section> <div> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> <div> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </div> </section> <section> <div> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> </div> <div class="full"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </div> </section> </form>
然后像这样的CSS
form { width: 400px; } form section div { float: left; } form section div.full { clear: both; } form section div label { display: block; }
我不想使用仅HTML5的元素，如<section> 。 如果您尝试使用代码生成表单，也可能会对input字段进行分组。 为每一个产生类似的标记总是更好的，只改变类名。 所以我会推荐一个如下所示的解决scheme：
CSS
label, input { display: block; } ul.form { width : 500px; padding: 0px; margin : 0px; list-style-type: none; } ul.form li { width : 500px; } ul.form li input { width : 200px; } ul.form li textarea { width : 450px; height: 150px; } ul.form li.twoColumnPart { float : left; width : 250px; }
HTML
<form name="message" method="post"> <ul class="form"> <li class="twoColumnPart"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </li> <li class="twoColumnPart"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </li> <li> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> </li> <li> <label for="message">Message</label> <textarea id="message" type="text" name="message"></textarea> </li> </ul> </form>
我知道这是一个已经被接受的答案，这个答案很好。如果你没有devise背景并且把最后的input留下来。 如果是，那么表单背景将不包含浮动的input字段。
为了避免这种情况，使用较小input字段的div内联块，而不是向左浮动。
这个：
<div style="display:inline-block;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div>
而不是：
<div style="float:left;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div>
10分钟前，我有上面input的地方标签相同的问题
然后我得到了一个小丑的决议
<form> <h4><label for="male">Male</label></h4> <input type="radio" name="sex" id="male" value="male"> </form>
缺点是标签和input之间有一个很大的空白，当然你可以调整CSS
演示在： http : //jsfiddle.net/bqkawjs5/
