如何在不使用表格的情况下有效地格式化表单元素？
[英]How do I format form elements effectively without using a table?
问题描述
我已经尝试了好几个小时而不使用表格来整齐地格式化表单。
我将标签向左浮动，将输入向右浮动，但是它们仍然不能整齐地排列在一起。 理想情况是这样的：
标签（根直径）| 输入（文字）| 标签（毫米）
我知道我可以用桌子来做，但是我正在寻找一种更优雅，更专业的方法。 如果有人可以指出正确的方向并举一个例子，我将不胜感激。
这是我的代码。
HTML：
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> <a href="#" id="reset" class="input" onclick="">Reset</a>
<a href="#" id="calculate" class="input" onclick="Calculate(); return(false);">Calculate</a>
<a href="#" id="close" class="input" onclick="">Exit</a>
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
CSS：
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
这是一个小提琴链接
5 个解决方案
解决方案1
1 2014-04-19 20:32:48
您可以使用CSS表格模型来显示“普通”的html标记和类似表格的显示
解决方案2
1 2014-04-19 20:33:24
由于这不是表格数据，因此不使用表格是正确的选择，但是您可以使用div元素创建表格：)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
这是小提琴： http : //jsfiddle.net/3Ej7Q/3/
解决方案3
0 2014-04-19 20:29:53
您可以只将.input类浮动到left并使它变窄一些（ max-width:70px ）。
在这里查看： http : //jsbin.com/pepixare/1/edit
解决方案4
0 2014-04-19 21:55:50
我使用div来解决此问题。 我的宽度以％为单位，如果您愿意，可以使用px。
col-表示div的宽度，以％为单位。（col-40 == width：40％;）
您可以使用其他属性（例如输入，ul，ol，a，img等）轻松实现此功能。
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
解决方案5
0 已采纳 2014-04-22 19:52:08
如何使这些元素有效地适应中心并做出响应？
[英]How do I get these elements to effectively center properly and responsively?
如何在页面主体中居中放置所有元素而不将居中格式应用于文本？
[英]How do I center all elements in the body of my page without applying the center format to text?
如何用表格行显示对多个元素进行分组而不弄乱表格？
[英]How do I group multiple elements with table-row display without messing up the table?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.