如何为文本<input>添加空格

Question

我想在图像中看到文本的左右空间。我能够用文本缩进放置左空格，但它似乎不适用于右空格。

谁能帮我？示例图像

Answer 1

这里的输入可以有左右填充来充当缩进。

input {padding: 0 5px}

因此，上面的输入将在左右两侧携带 5px 的空间。

Answer 2

如果你想在一个文本框中使用它，那么像下面这样添加class并在css中使用它

<input type='text' name='firstname' class='space'>
    .space
    {
        padding-left : 10px;
        padding-right: 10px;
    }

如果你想要两面，你只能使用padding。如果您像这样使用，它将在窗口中有适当空间时工作。如果要将空间保持在任何屏幕尺寸，可以使用边框框。

.space
{
    padding-left : 10px;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

如果您的标记允许，一种选择是将文本缩进与填充相结合：

text-indent: 10px;
padding-right: 20px;

我想另一种方法可能是"方向"属性，其值为"rtl"与"text-align：left"相结合。

Answer 4

请尝试以下代码

input{
    border: none;
    padding: 10px;
    margin: 10px;
    height: 20px;
    width: 500px;
    border:1px solid #eaeaea;
    outline:none;
}
input:hover{
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
    border-color:#4d90fe;
}

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

Answer 5

您可以为输入文本设置一些填充：

input {
  padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */
}

这里是关于CSS填充属性的文档：https://www.w3schools.com/css/css_padding.asp