6

我正在创建一个简单的 HTML 文档，其中包含一个我打算用作Firefox 附加组件中面板内容的表单。目前该文档包含一个标签和文本框，我希望它可以拉伸页面的整个宽度，两边的边距为 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 的边距 - 文本框一直延伸到页面的边缘。我怎样才能解决这个问题？

这是我的问题的小提琴。

4

4 回答 4

3

你可以这样做：

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

div
{
    padding: 0.5em;
}

div > *
{
    width: 100%;
}

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

更多信息：设置 CSS 100% 宽度减去填充和边距

于 2013-04-03T16:06:13.350 回答
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+ */
}
于 2013-04-03T16:02:35.337 回答
1

你应该这样尝试：

<!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>
于 2013-04-03T15:51:53.827 回答
1

设置 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;
}
于 2013-04-03T16:10:31.227 回答