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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

这主要是有效的,除了我在右边缺少一个5px的边距 - 文本框一直延伸到页面的边缘.我怎样才能解决这个问题？

这是我问题的小提琴.

Answer 1

Len*_*rri 3

你可以这样做：

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

div
{
    padding: 0.5em;
}

div > *
{
    width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

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

更多相关内容请参见：设置 CSS 100% 宽度减去填充和边距

归档时间：	12 年，7 月前
查看次数：	6968 次
最近记录：	12 年，7 月前