在HTML文本输入框中添加填充。

Question

我想在 <input type="text" /> 右侧添加一些空间，以便该字段右侧有一些空白空间。

所以，不是 ，而是带有右侧空间的 。

也就是说，相同的行为只是在右侧增加了一些空白空间。

我已经尝试使用 padding-right，但似乎没有任何效果。

是否有一种方法可以实现这个目标（或者模拟）？

- Nathan

Answer 1

你可以像这样为输入框提供填充：

HTML：

<input type=text id=firstname />

CSS：

input {
    width: 250px;
    padding: 5px;
}

不过我也会补充一点：

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使得输入框的宽度保持在250px，而不会因为填充(padding)而增加到260px。

参考链接.

- Greg

Answer 2

在Windows上，padding-right可以在Firefox/Chrome中正常工作，但在IE中却不行。欢迎来到IE标准不兼容的美妙世界。

请参见：http://jsfiddle.net/SfPju/466/

HTML

<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>

CSS

.foo
{
    padding-right: 20px;
}

- evan

Answer 3

padding-right应该有效。请参考以下示例链接：

http://jsfiddle.net/8Ged8/

- Jeff Parker

Answer 4

你可以通过将 input 标签放在一个 div 中，然后在 div 标签上设置 padding 属性来解决此问题。这对我很有效......

像这样：

<div class="paded">
    <input type="text" />
</div>

以及CSS：

.paded{
    padding-right: 20px;
}

- Carlos Rafael

Answer 5

HTML

<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>

对于其他浏览器：

.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;
}

对于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;
}

- Anbazhagan Devaraj

Answer 6

<input class="form-control search-query input_style" placeholder="Search…"  name="" title="Search for:" type="text">


.input_style
{
    padding-left:20px;
}

- Md Khairul Islam

---

在你的输入标签中添加“input_style”类，然后将以下代码添加到你的CSS文件中。 - Md Khairul Islam

添加更多关于你的解决方案的信息。 - user7294900

Answer 7

我曾经遇到过类似的问题，通过设置父容器的宽度并添加右侧填充来解决它（以防止填充时改变输入框的大小）。

- hexler baku

---

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加更多细节，例如引用或文档，以便其他人可以确认你的答案是否正确。您可以在帮助中心中找到有关如何编写好答案的更多信息。 - Community