Question

我希望找到一个用于在HTML页面中排列输入元素的资源。我发现即使使用宽度样式属性也很难将选择元素和文本框设置为相同的宽度，并且在浏览器中更难以实现。最后，文件输入似乎无法达到相同宽度的跨浏览器。是否有任何好的指南或提示来完成这个？也许我应该设置一些默认的CSS属性。

Answer 1

我在Internet Explorer 7，Firefox 3和Safari / Google Chrome中对此进行了测试。我确实看到了<select>和<input type="file">的问题。我的调查结果显示，如果您以相同的宽度设置所有输入的样式，则<select>在所有浏览器中的缩短时间将缩短约5个像素。

使用Eric Meyer CSS reset script对此问题没有帮助，但是如果您只是使<select>输入宽5个像素，那么在主流浏览器中您将获得非常好的（尽管不是完美的）对齐。唯一不同的是Safari /谷歌浏览器，它看起来比所有其他浏览器宽1或2个像素。

就<input type="file">而言，那里的样式没有太大的灵活性。如果JavaScript是您的选项，您可以实现方法shown on 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>

Answer 2

我通常将它们放在我想要的宽度的div或表格单元格（恐怖！我知道）中，然后设置选择和输入样式：宽度为100％，这样它们就可以填充它们所在的div /单元格。

Answer 3

我发现如果您将选择和输入元素边框并填充为0，则它们的宽度相同。（在Chrome 14，Firefox 7.0.1，Opera 11.51，IE 9上测试）

在选择和输入元素上放置1px边框/填充使输入元素更宽2像素。例如：

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}

Answer 4

除了宽度，我也会设置边框和边距，这些可能会影响您的控件，也可能不会影响您的控件。这样的事情可能有所帮助：

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron也有一个好主意。

Answer 5

您是否使用一些基本设置启动CSS文件？在所有元素上关闭填充和边距可能很有用。我没有测试过这是否会影响选择/输入元素。

以下是Eric Meyer的CSS重置示例：

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 6

不同浏览器的文件输入可能根本不同，并且绝对不允许自定义，这可能很烦人，但我也理解为什么这是从安全角度来看。例如，尝试更改大多数浏览器上显示的“浏览”按钮的文本，或将Safari上的文件输入与其他浏览器进行比较......

Answer 7

我不认为Ron's想法有效......

测试用例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

这导致输入比选择宽一些px（这可能取决于OS）。我不确定这是否可以实现，即使使用+ 5px技巧，因为选择的样式似乎是OS（至少是Windows主题）依赖。

Answer 8

如果你迫切需要{宽度：100％;并且没有指定宽度（以像素为单位），那么jQuery就是你的朋友：

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6像素最适合我（FF9），根据需要进行编辑。

Answer 9

这是因为使用＆lt; input＆gt;时，边框和填充会添加到宽度上（与大多数其他元素一样）。使用＆lt; select＆gt;，边框和填充包含在宽度中，就像在旧的IE怪癖模式中一样。

你可以通过增加宽度来解决这个问题：

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

或者（如果你可以依赖浏览器支持）你可以使用新的CSS3 box-sizing属性使它们表现一致，并在元素宽度之外绘制填充和边框：

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

或者，您可以将box-sizing设置为border-box，使输入的行为与选择相同，并在框的宽度内绘制填充。

在Chrome，IE8，FF中测试

如何排列HTML输入元素？

9 个答案: