我需要制作多列表单布局，其中每一行可以有不同的字段数，如下所示：
我第一次使用 table 和td'scolspan属性来创建布局。但是我读到使用表格进行布局并不是一个好主意，所以我想改进我的代码以使用 div's.
那么任何人都可以给我一个很好的例子来说明如何根据最佳实践进行上述布局吗？对我来说最大的问题是列的宽度不同。
谢谢。
问问题
15690 次
5 回答
4
不要因为没有写出 100% 有效input的字段以及没有带有边距等的清晰布局而杀了我。
样本
HTML
<div>
<div class="w50">
<span class="label">Name</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Surname</span>
<input type="text" value="Test" />
</div>
<div class="w100">
<span class="label">Contact</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
<div class="w70">
<span class="label">Phone</span>
<input type="text" value="Test" />
</div>
<div class="w30">
<span class="label">Time</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.label {
width: 60px;
display: inline-block;
}
.w30, .w50, .w70, .w100 {
height: 20px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}
于 2013-10-29T16:16:16.787 回答
3
这里的诀窍是想出某种网格系统。在我的示例中，我已经组合了一个基于 5% 的网格系统。你可以在这个小提琴中看到你的一些确切作品的基本示例。
#container { font-size: 12px; width: 700px; }
.row { float: left; margin: 5px 0; width: 100%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.item { box-sizing: border-box; float: left; }
input, select, option { margin: 0; }
我已经将这些项目排成行，以提供干净的网格状外观。
<div id="container">
<div class="row">
<div class="item w15">/* Entity Name</div>
<div class="item w35">Maricopa County Community College District</div>
<div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
</div>
<div class="row">
<div class="item w15">/* Doctype</div>
<div class="item w10">NLP?</div>
<div class="item w20">Filename/Keywords</div>
<div class="item w20">*Source Frequency</div>
<div class="item w35">
<input type="radio" name="freq" checked="checked" />
<label>Daily</label>
<input type="radio" name="freq" />
<label>Weekly</label>
<input type="radio" name="freq" />
<label>Monthly</label>
</div>
</div>
<div class="row">
<div class="item w15">
<input type="checkbox"/>
<label>Audit</label>
</div>
<div class="item w10">
<input type="checkbox"/>
</div>
<div class="item w20">
<input type="text"/>
</div>
<div class="item w20">*Every</div>
<div class="item w15">
<input type="text" class="w20" value="1"/>
<label>Days</label>
</div>
<div class="item w20">
<select>
<option value="utc-6">UTC -6</option>
</select>
</div>
</div>
</div>
基本上，一个特定的结构就是你所追求的，一个排成一行的类似网格的系统是一个很好的方法。
于 2013-11-06T18:54:53.717 回答
2
桌子还不错。
不推荐布局的原因tables是只有当表格中的所有内容都加载到页面中时才会加载表格（显示表格的内容）。但是 div 会在加载后立即显示其内容。
现在，在您的情况下，您的表单对我来说看起来相当复杂，我认为在页面仍在加载时显示此表单的部分内容是不可取的。您肯定希望同时显示表单的所有字段。
此外，当您想表示表格数据（我认为这适用于您的情况）时，建议使用表格。
所以我建议（我可能错了，如果我错了，请有人纠正我）为你的这种形式使用表格。表格提供的另一个好处是您不必过多担心内容的对齐方式。
于 2013-11-06T17:30:39.983 回答
1
您基本上可以创建多个 css 类来描绘您想要描绘的所有宽度。它不会是严格灵活的列，但更像是灵活的行，您将不得不考虑行而不是列。
因此，对于每一行，您将附加特定的宽度类
<div class="row">
<div class="left width-50"></div>
<div class="right width-50"></div>
</div>
<div class="row">
<div class="left width-70"></div>
<div class="right width-30"></div>
</div>
<div class="row">
<div class="left width-100"></div>
</div>
....
....
希望它会有所帮助。
于 2013-10-29T16:17:07.663 回答
0
看一下这个：
HTML
<html>
<head>
<link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>
<div id="contactform">
<div id="first">
<div id="name">
<div id="description">Name</div>
<input type="text" name="textName">
</div>
<div id="surname">
<div id="description"> Surname</div>
<input type="text" name="textSurname">
</div>
</div>
<div id="second">
<div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
</div>
<div id="third">
<div id="age">
<div id="description">Age</div>
<input type="text" name="textAge">
</div>
<div id="e-mail">
<div id="description">E-mail</div>
<input type="email" name="textEmail">
</div>
</div>
<div id="fourth">
<div id="phone">
<div id="description">Phone</div>
<input type="text" name="textPhone">
</div>
<div id="time">
<div id="description">Time</div>
<input type="date" name="textTime">
</div>
</div>
</div>
</body>
</html>
CSS
#contactform {width:500px; height:500px;}
#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;}
#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}
#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}
#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}
#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}
输出
HTH。
于 2013-10-29T17:00:34.687 回答