我正在创建一个简单的 HTML 文档，其中包含一个我打算用作 panel 的内容的表单在 Firefox 附加组件中。目前文档包含一个标签和文本框，我希望它能拉伸(stretch)页面的整个宽度，每边留出 5 像素的边距。这是我的代码:
<!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>
除了我在右侧缺少 5 像素的边距外，这大部分都有效 - 文本框向右延伸到页面边缘。我该如何解决这个问题？
最佳答案
你可以这样做:
body
{
font: 10pt arial, helvetica, sans-serif;
}
div
{
padding: 0.5em;
}
div > *
{
width: 100%;
}
这是 JS Bin 演示:http://jsbin.com/utabul/1
关于html - 将文本框拉伸(stretch)到页面的整个宽度，边距为 5px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15791951/