24

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

4

9 回答 9

17

我在 Internet Explorer 7、Firefox 3 和 Safari/Google Chrome 中对此进行了测试。我肯定看到了<select>and的问题<input type="file">。我的发现表明，如果您将所有输入设置为相同宽度，则<select>在所有浏览器中都会缩短约 5 个像素。

使用Eric Meyer CSS 重置脚本并不能解决这个问题，但是如果您只是将<select>输入宽 5 像素，您将在主要浏览器中获得非常好的（尽管不是完美的）对齐。唯一不同的是 Safari/Google Chrome，它似乎比所有其他浏览器宽 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>

于 2008-10-08T06:16:18.097 回答
13

我通常将它们放在我想要的宽度的 div 或表格单元格中（恐怖！我知道），然后将选择和输入 style:width 设置为 100%，以便它们填充它们所在的 div / 单元格。

于 2008-10-07T22:09:30.357 回答
2

我发现如果将选择和输入元素边框和填充设置为 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;
}
于 2011-10-22T18:01:45.443 回答
1

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

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

罗恩也有个好主意。

于 2008-10-07T22:11:53.427 回答
0

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

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

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

于 2008-10-07T22:11:42.880 回答
0

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

于 2008-10-07T23:52:22.880 回答
0

我认为罗恩的想法行不通……

测试用例：

<!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（这可能取决于操作系统）。我不确定这是否可以实现，即使使用 +5px 技巧，因为选择的样式似乎依赖于操作系统（至少是 windows 主题）。

于 2009-11-17T16:33:34.660 回答
0

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

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

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

于 2012-02-02T13:09:31.597 回答
0

这是因为使用 <input>，边框和填充被添加到宽度上（就像大多数其他元素一样）。使用 <select>，边框和填充包含在宽度中，就像在旧的 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 中测试

于 2012-06-13T09:22:18.980 回答