将文本框拉伸到页面的整个宽度，边距为 5px
Posted
技术标签:
【中文标题】将文本框拉伸到页面的整个宽度，边距为 5px【英文标题】：Stretch a text box the full width of the page with a 5px margin 【发布时间】：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：是的，你的答案已经完成。继续发布答案，我会给你信用。
【参考方案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;
【讨论】：
以上是关于将文本框拉伸到页面的整个宽度，边距为 5px的主要内容，如果未能解决你的问题，请参考以下文章