我需要使用CSS对齐表单的标签和输入。结果应该是这样的(我希望这个简单的方案是明确的):
Label1: ______
Labellll2: ______
Button
所以,我的HTML和CSS看起来如下。问题是标签放在输入的顶部,而且按钮位于右侧而不是底部。
<form width="200px" name="optform" method="post" action="#">
<div class = "boxx">
<label for="param1">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param1" id="param1">
<label for="param2">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param2" id="param2">
</div>
<div class="buttons">
<a href="#">
<img src="images/opt.png" alt=""/> Run
</a>
</div>
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}
答案 0 :(得分:4)
标签需要
display:inline-block;
并且标签或输入框的宽度太大。填充和边距将导致宽度百分比问题,因为它们不会被考虑在内。
这是更新后的css
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
width:60%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}
答案 1 :(得分:1)
我知道现代CSS人讨厌表,但在这种情况下(和div有许多对齐问题)我推荐一个漂亮的小桌子。
<table>
<tr>
<td>Label1: </td><td><input type="text" /></td>
</tr><tr>
<td>Label2: </td><td><input type="text" /></td>
</tr><tr>
<td>Label3: </td><td><input type="text" /></td>
</tr>
</table>
<input type="button" />
答案 2 :(得分:1)
尝试类似http://jsfiddle.net/mmyxD/
的内容是否存在所有边距/填充的原因?你的宽度正在迫使元素进入新的界限。
答案 3 :(得分:0)
您还可以使用div和span。像这样:
<form action="">
<div class="row"><span class="label">label1:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="row"><span class="label">label2:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="spacer"> </div>
</form>
和css:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 33%;
text-align: left;
}
div.row span.formw input{
width: 100%;
}
div.row span.formw {
float: right;
width: 66%;
text-align: left;
}