Question

大约一年前，有人询问有关如何水平对齐输入和textarea元素的stackoverflow问题：input width vs textarea width

我有一些HTML + CSS，我正在努力做到这一点，但我发现无论CSS复位和我使用的精确，基于像素的宽度定义的组合，我根本无法得到我的元素页面在右侧排队（左对齐自动发生）。这是一些简单的演示代码。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      * {margin: 0; padding: 0;} /* primitive reset */
      body {width: 200px; margin-left:auto; margin-right: auto;
            border: 1px solid black;}
      input {border: 1px solid black; width: 200px;}
      div {border: 1px solid black;}
      textarea {border: 1px solid black; width: 200px;
      }
    </style>
  </head>
  <body>
    <input type="text" value="textinput">
    <div>div</div>
    <textarea>textarea</textarea>
  </body>
</html>

如果我改变input和textarea的宽度，我可以让它们排成一行，比如说chrome。但他们不会在Firefox中排队。反之亦然。默认情况下，即使css重置，一个元素或另一个元素将与右侧的包含div重叠。您可以删除我设置的边框，并根据需要使用浏览器各自的DOM检查器。

我花了太多时间讨论这个问题，所以我想知道这里有人知道我想做的事情是否可行。

Answer 1

这确实令人沮丧。你最好的选择是从输入元素中删除边框并将它们包装在另一个带有边框的固定宽度元素中，例如<div>。

<!DOCTYPE html>
<html>
  <head>
    <title>SO question 3577146</title>
    <style>
      * { margin: 0; padding: 0; } /* primitive reset */
      body { width: 200px; margin: 0 auto; border: 1px solid black; }
      div { width: 200px; border: 1px solid black; }
      input { width: 198px; border: 0; }
      textarea { width: 198px; border: 0; }
    </style>
  </head>
  <body>
    <div><input type="text" value="textinput"/></div>
    <div>div</div>
    <div><textarea>textarea</textarea></div>
  </body>
</html>

Here's a jsfiddle demo

是否有跨浏览器方式来阻止HTML表单元素与其容器重叠？

1 个答案: