如何排列HTML输入元素？ [英] How to line up HTML input elements?
问题描述
我希望在HTML页面中找到用于排列输入元素的资源。我发现很难获得一个select元素和一个文本框是相同的宽度，即使使用width style属性，它在各个浏览器更困难。最后，文件输入似乎不可能得到相同宽度的交叉浏览器。有没有什么好的指南或提示完成这个？也许有一些默认的CSS属性我应该设置。
I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using the width style attribute, and it is even more difficult across browsers. Finally, file inputs seem impossible to get to the same width cross browser. Are there any good guides or tips for accomplishing this? Perhaps there are some default CSS attributes I should be setting.
推荐答案
我在Internet Explorer 7，Firefox 3和Safari /谷歌浏览器。我肯定会看到< select> 和< input type =file> 我的研究结果显示，如果你把所有的输入样式设置为相同的宽度，所有浏览器的< select> 约缩短5像素。
I tested this out in Internet Explorer 7, Firefox 3 and Safari/Google Chrome. I definitely see the problem with <select> and <input type="file">. My findings showed that if you styled all the inputs at the same width, the <select> would be about 5 pixels shorter in all browsers.
使用 Eric Meyer CSS重置脚本不会帮助这个问题，但是如果你只是让你的< select> 输入5像素宽，你会得到非常好（虽然不完美）主要浏览器。唯一不同的是Safari / Google Chrome，它看起来比所有其他浏览器宽1或2像素。
Using the Eric Meyer CSS reset script does not help this issue, however if you simply make your <select> inputs 5 pixels wider you'll get very good (albeit not perfect) alignment in the major browsers. The only one that differs is Safari/Google Chrome, and it appears to be 1 or 2 pixels wider than all the other browsers.
至于< input type =file> ，你没有太多的灵活性。如果您可以选择JavaScript，则可以实施 quirksmode 上显示的方法来实现更好地控制文件上传控件的样式。
As far as the <input type="file"> is concerned, you don't have much flexibility with styling there. If JavaScript is an option for you, you can implement the method shown on quirksmode to achieve greater control over the styling of the file upload control.
请参阅XHTML 1.0中的完整工作示例严格使用具有一致输入宽度的典型表单。注意，这不使用他人在这里指出的100％宽度技巧，因为它有不一致宽度的相同问题。此外，没有用于呈现表单的表格，因为表格只应用于表格数据而不是布局。
See my full working example below in XHTML 1.0 Strict for a typical form with consistent input widths. Note that this does not use the 100% width trick pointed out by others here because it has the same problem with inconsistent widths. Additionally there are no tables used to render the form as tables should only be used for tabular data and not layout.
<!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>
这篇关于如何排列HTML输入元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
