Gre*_*reg 24 html css css-reset
我希望找到一个资源来排列HTML页面中的输入元素.我发现即使使用宽度样式属性也很难将选择元素和文本框设置为相同的宽度,并且在浏览器中更难以实现.最后,文件输入似乎无法达到相同宽度的跨浏览器.是否有任何好的指南或提示来完成这个？也许我应该设置一些默认的CSS属性.
cow*_*god 17
我在Internet Explorer 7,Firefox 3和Safari/Google Chrome中对此进行了测试.我肯定看到了<select>和的问题<input type="file">.我的研究结果表明,如果你设置相同宽度的所有输入,那么<select>在所有浏览器中缩短约5个像素.
使用Eric Meyer CSS重置脚本对此问题没有帮助,但是如果您只是使<select>输入宽5个像素,那么在主流浏览器中您将获得非常好的(尽管不是完美的)对齐.唯一不同的是Safari /谷歌浏览器,它似乎比所有其他浏览器宽1或2个像素.
就这<input type="file">一点而言,你在那里的造型方面没有太大的灵活性.如果JavaScript是您的选项,您可以实现quirksmode上显示的方法,以更好地控制文件上载控件的样式.
请参阅下面的XHTML 1.0 Strict中的完整工作示例,了解具有一致输入宽度的典型表单.请注意,这不使用其他人指出的100%宽度技巧,因为它具有相同的宽度不一致的问题.此外,没有用于呈现表单的表,因为表只应用于表格数据而不是布局.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label,
input,
select,
textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>Ron*_*age 13
我通常把它们放在我想要的宽度的div或table单元格(恐怖!我知道)中,然后设置select和input样式:width到100%,这样它们就可以填充它们所在的div/cell.