使用5px页边距在页面的整个宽度上拉伸文本框

我正在创建一个简单的HTML文档，其中包含一个我打算用作Firefox插件中panel内容的表单。目前该文档包含一个标签和文本框，我希望这可以在页面的任何一边以5px的宽度拉伸页面的整个宽度。这是我的代码：使用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.

来源

2013-04-03 Dan Stevens

我添加了一个小提琴，所以人们可以向他们展示他们的答案。 – Jeff

固定位置？试试这个：http://jsfiddle.net/bUq32/ – dfsq

@dfsq：我认为你的小提琴有它。为什么不把它作为答案？ – Jeff

你可以这样说：

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

div 
{ 
    padding: 0.5em; 
} 

div > * 
{ 
    width: 100%; 
}

这里的JS斌演示：http://jsbin.com/utabul/1

更多关于此这里：Set CSS 100% Width Minus Padding And Margin

来源

2013-04-03 16:06:13

这个更好！谢谢！ –

不客气。刚刚了解了这个今天！感谢您发布该问题... :) –

你应该试试这种方法：

<!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-03 15:51:53 csaron92

虽然这实际上并没有解决它。相反，这会使页面向右滚动。这里是在小提琴：http://jsfiddle.net/NgXjW/1/ – Jeff

是的，你是对的。正确的方法：* {margin：0;填充：0; } div { padding：0px 7px 0 5px; } #phrase { width：100％; } 7px填充而不是5px是因为输入字段的边框。 – csaron92

你应该尝试箱尺寸。我只是将边距添加到包装表单元素的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+ */ 
}

来源

2013-04-03 16:02:35

您的解决方案似乎迄今为止最优雅。谢谢！ –

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

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

来源

2013-04-03 16:10:31

使用5px页边距在页面的整个宽度上拉伸文本框

回答

相关问题