Question

我正在创建一个简单的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.

Answer 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

Answer 2

你应该尝试盒子大小。我只是将边距添加到包裹表单元素的div中，从正文中移除位置并将值大小添加到输入中。

-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+ */
}

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

Answer 4

设置身体填充：5px而不是边距，摆脱固定位置并将div宽度设置为100％而不是身体 - http://jsfiddle.net/xX8yA

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

以5px的边距拉伸文本框的整个页面宽度

4 个答案: