将文本框拉伸到页面的整个宽度，边距为 5px答案

【问题标题】：Stretch a text box the full width of the page with a 5px margin将文本框拉伸到页面的整个宽度，边距为 5px
【发布时间】：2013-03-25 09:22:38
【问题描述】：

我正在创建一个简单的 HTML 文档，其中包含一个我打算用作 Firefox 插件中 panel 内容的表单。目前该文档包含一个标签和文本框，我希望它可以拉伸页面的整个宽度，两边的边距为 5px。这是我的代码：

<!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" xml:lang="en">
<head>
  <title>Phrase Indexer</title>
  <style type="text/css" media="all">
  body {
    font: 10pt arial, helvetica, sans-serif;
    padding: 0;
    margin: 5px;
    position: fixed;
    width: 100%;
  }
  div {
    width: inherit
  }
  #phrase {
    width: inherit;
  }
  </style>

</head>

<body>

<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>

</body>

</html>

这主要是有效的，除了我在右边缺少 5px 的边距 - 文本框一直延伸到页面的边缘。我该如何解决这个问题？

Here's a Fiddle of my problem.

【问题讨论】：

我添加了一个 Fiddle，这样人们就可以向你展示他们的答案。
职位fixed?试试这个：jsfiddle.net/bUq32
@dfsq：我认为你的小提琴有它。为什么不将此作为答案发布？
@dfsq：是的，你的答案已经完成。继续发布答案，我会给你信用。

标签： html css input width margin

【解决方案1】：

你可以这样做：

body
{
   font: 10pt arial, helvetica, sans-serif;
}

div
{
    padding: 0.5em;
}

div > *
{
    width: 100%;
}

这是 JS Bin 演示：http://jsbin.com/utabul/1

在此处了解更多信息：Set CSS 100% Width Minus Padding And Margin

【讨论】：

这个更好！谢谢！
不客气。今天才知道这个！感谢您发布问题... :)

【解决方案2】：

你应该试试盒子大小。我只是将边距添加到包装表单元素的 div 中，从正文中删除了位置并将 box-sizing 添加到输入中。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */


body {
  font: 10pt arial, helvetica, sans-serif;
  padding: 0;
  margin:0;
  /* position: fixed; */
}
div {
  display:block;
  margin:5px;
}
#phrase {
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

您的解决方案似乎是迄今为止最优雅的。谢谢！

【解决方案3】：

你应该试试这个方法：

<!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" xml:lang="en">
<head>
  <title>Phrase Indexer</title>
  <style type="text/css" media="all">
  *{
      margin:0;
      padding:0;
  }
  body {
  }
  div {
  }
  #phrase {
    width: 100%;
    margin:5px;
  }
  </style>

</head>

<body>

<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>

</body>

</html>

【讨论】：

不过，这实际上并不能解决问题。相反，这会使页面向右滚动。它在小提琴中：jsfiddle.net/NgXjW/1
是的，你是对的。正确方法：*{ margin: 0;填充：0； } div{ 填充：0px 7px 0 5px; } #phrase { 宽度：100%; 7px 填充而不是 5px 是因为输入字段的边框。

【解决方案4】：

设置body padding：5px代替margin，摆脱固定位置，设置div宽度为100%代替body - http://jsfiddle.net/xX8yA

body {
font: 10pt arial, helvetica, sans-serif;
padding: 5px;
}
div {
width: 100%;
}
#phrase {
width: inherit;
}

【讨论】：