如何对齐HTML输入元素？

Question

如何对齐HTML输入元素？

24

我希望能找到一个资源来对齐HTML页面中的输入元素。即使使用width样式属性，我也很难让select元素和文本框具有相同的宽度，而且跨浏览器更加困难。最后，文件输入似乎不可能在不同的浏览器中获得相同的宽度。有没有一些好的指南或提示可以实现这一点？也许有一些默认的CSS属性我应该设置。

- Greg

17

@Jeremy，虽然可以争论HTML和CSS并不严格属于“编程”范畴，但它们肯定非常接近。我猜这个网站上相当多的人每天都会使用它们作为工作的一部分。 - Gareth Davis

这个问题似乎发生在标准模式下呈现时，移除doctype标签并查看差异。查看解决我的问题的这个问题：http://stackoverflow.com/questions/5627110/doctype-html-width-render-issue-input-element - pauloya

9个回答

13

我通常将它们放在一个div或表格单元格（好可怕！我知道）内，设置所选内容和输入style:width为100％，以便它们填充它们所在的div / cell。

- Ron Savage

我认为这是一个显而易见的解决方案。 - Robin Rodricks

当输入超出其<td>边界进入下一个单元格时，它将无法正常工作。 - Ian Boyd

2

我发现如果您将元素的边框和填充设置为0，则它们的宽度相同。(在Chrome 14，Firefox 7.0.1，Opera 11.51，IE 9上进行了测试)

在元素上添加1像素的边框/填充会使元素宽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;
}

- Dalius

1

除了宽度之外，我还会设置边框和外边距，这可能会影响您的控件。类似这样的代码可能会帮助您：

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

Ron 也有一个很好的想法。

- monoxide

你是不是指的是“input，select {”？否则你就是在选中一个作为input子元素的select :) - Olly Hodgson

当然，我的错。不过，那样的结果看起来很有趣。 - Matthew Scharley

0

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

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

-6像素对我来说效果最好（FF9），根据需要进行编辑。

- Slawa

0

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

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

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

- davebug

0

文件输入在不同的浏览器中可能存在根本性的差异，而且肯定不允许进行太多的自定义，这可能会很烦人，但我也理解从安全角度考虑这样做的原因。例如，尝试更改大多数浏览器上出现的“浏览”按钮的文本，或将Safari上的文件输入与其他浏览器进行比较...

- mmacaulay

0

我不认为Ron的想法行得通...

测试用例：

<!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>

这会导致输入框比选择框宽一些像素（这可能与操作系统有关）。我不确定即使使用+5像素的技巧是否能够实现，因为选择框的样式似乎取决于操作系统（至少是Windows主题）。

- AlfaTeK

0

这是因为对于元素，边框和填充会添加到宽度中（就像大多数其他元素一样）。而对于

- Jim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cowgod · Accepted Answer

我在Internet Explorer 7、Firefox 3和Safari/Google Chrome中测试了这个问题。我发现在所有浏览器中，<select>和<input type="file">都存在问题。我的研究结果表明，如果将所有输入的样式设置为相同的宽度，则在所有浏览器中，<select>都会短约5个像素。

使用Eric Meyer CSS reset脚本对此问题没有帮助，但是如果您只是将<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>