向 HTML 文本输入字段添加填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6586302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add padding to HTML text input field
提问by Nathan
I want to add some space to the right of an <input type="text" />so that there's some empty space on the right of the field.
我想在 an 的右侧添加一些空间，<input type="text" />以便在该字段的右侧有一些空白空间。
So, instead of 
, I'd get .
所以，而不是，我会得到。
So, same behavior just some empty space to the right.
因此，相同的行为只是右侧的一些空白区域。
I've tried using padding-right, but that doesn't seem to do anything.
我试过使用padding-right，但这似乎没有任何作用。
Is there a way to do this (or fake it)?
有没有办法做到这一点（或伪造它）？
回答by Greg
You can provide padding to an input like this:
您可以像这样为输入提供填充：
HTML:
HTML：
<input type=text id=firstname />
CSS:
CSS：
input {
width: 250px;
padding: 5px;
}
however I would also add:
不过我还要补充一点：
input {
width: 250px;
padding: 5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Box sizing makes the input width stay at 250px rather than increase to 260px due to the padding.
框大小使输入宽度保持在 250 像素，而不是由于填充而增加到 260 像素。
供参考。
回答by evan
padding-right works for me in Firefox/Chrome on Windows but not in IE. Welcome to the wonderful world of IE standards non-compliance.
padding-right 适用于 Windows 上的 Firefox/Chrome，但不适用于 IE。欢迎来到 IE 标准不合规的奇妙世界。
See: http://jsfiddle.net/SfPju/466/
见：http: //jsfiddle.net/SfPju/466/
HTML
HTML
<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>
CSS
CSS
.foo
{
padding-right: 20px;
}
回答by Jeff Parker
padding-right should work. Example linked.
padding-right 应该可以工作。示例链接。
回答by Anbazhagan Devaraj
HTML
HTML
<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>
For Other Browsers:
对于其他浏览器：
.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
For IE:
对于 IE：
.FieldElement input {
width: 380px;
border:0;
}
.FieldElement {
border:1px solid #ccc;
width: 455px;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
回答by Carlos Rafael
you can solve this, taking the inputtag inside a div,
then put the padding property on divtag. This work's for me...
你可以解决这个问题，把input标签放在 a 里面div，然后把 padding 属性放在div标签上。这项工作是为我...
Like this:
像这样：
<div class="paded">
<input type="text" />
</div>
and css:
和CSS：
.paded{
padding-right: 20px;
}
回答by Md Khairul Islam
<input class="form-control search-query input_style" placeholder="Search…" name="" title="Search for:" type="text">
.input_style
{
padding-left:20px;
}
