Question

我想将左右空间放在文本中，如图所示。我能够将左侧空间放置在文本缩进处，但它似乎并不适用于正确的空间。

任何人都可以帮助我吗？ sample image

Answer 1

如果您想在一个文本框中填写，请添加class，如下所示，并在css

中使用它

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

如果你想要双方都可以只使用padding。如果你这样使用它会在窗口中有适当的空间时起作用。如果你想保持任何屏幕尺寸的空间你可以使用border-box

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

Answer 2

此处输入可以左侧填充以进行缩进。

input {padding: 0 5px}

因此，上面的输入将向左和向右输入5px的空间。

Answer 3

如果您的标记允许，一个选项是将文本缩进与填充结合起来：

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

我猜的另一种方法可能是“direction”属性，其值为“rtl”并结合“text-align：left”。

Answer 4

请尝试以下代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

5 个答案: