我正在尝试将表单中的标签对齐到文本输入框下方。我从here改编了我的CSS。
它在IE 9中完美显示,但我遇到了firefox,chrome等问题。
以下是IE中的样子:
这就是firefox中的样子:
在chrome中看起来最糟糕,但我想首先在firefox中使用它。
主要关注点是:
这是我的标记:
<form action="" method="post">
<label for="time">Time settings</label>
<div class="description">
Description goes here
</div>
<span><label for="time">Hour</label> <input type="text" id="time" name="time" maxlength="2" size="2"></span>
<span>:</span>
<span><label for="time-minute">Minute</label> <input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"></span>
<span>:</span>
<span><label for="time-seconds">Seconds</label> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"></span>
<span>
<select id="time-ampm" name="time-ampm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</span>
</form>
这是CSS风格:
<style>
span{
display: inline-block;
}
span input {
display: block;
position: relative;
top: -3em;
text-align: center;
}
span label {
display: block;
padding-top: 1.5em;
text-align: center;
}
</style>
我也在使用HTML 4.01严格的doctype。
以下是jsfiddle中的表格:http://jsfiddle.net/VuShK/
有人可以给我一些关于如何解决这个问题的建议吗?
解决方案 : 感谢所有回复的人。
这是我的最终解决方案,文本输入居中。感谢AVD的帮助。
<style>
span{
display: inline-block;
position: relative;
top: -1em;
text-align:center;
}
span select input {
display: block;
position: relative;
top: -3em;
}
span label {
display: block;
position: relative;
top:2.7em;
text-align: center;
}
</style>
答案 0 :(得分:6)
试试这个,
<style>
span{
display: inline-block;
}
span select input {
display: block;
position: relative;
top: -3em;
}
span input { text-align:center;}
span label {
display: block;
position: relative;
top:3em;
text-align: center;
}
</style>
答案 1 :(得分:0)
<div style="overflow:hidden;border:1px blue solid;">
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
<input style="width:80%;"> :
<div style="border:1px red solid;">Hours</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
<input style="width:80%;"> :
<div style="border:1px red solid;">Minutes</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
<input style="width:80%;"> :
<div style="border:1px red solid;">Seconds</div>
</div>
<div style="float:left;width:120px;border:1px lime solid;text-align:center;">
<select style="width:90%;"></select>
</div>
</div>
答案 2 :(得分:0)
检查
<form action="" method="post">
<table>
<tr>
<td colspan="4">
<label for="time">Time settings</label>
</td>
</tr>
<tr>
<td colspan="4">
<label for="Description">Description goes here</label>
</td>
</tr>
<tr>
<td>
<span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time">:</label></span>
</td>
<td>
<span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time-minute">:</label></span>
</td>
<td>
<span> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"><label for="time-minute">:</label></span>
</td>
<td>
<span><select id="time-ampm" name="time-ampm"><option value="am">AM</option><option value="pm">PM</option></select></span>
</td>
</tr>
<tr>
<td>
<label for="time">Hour</label>
</td>
<td>
<label for="time-minute">Minute</label>
</td>
<td>
<label for="time-minute">Seconds</label>
</td>
<td> </td>
</tr>
</table>