Question

我制作了一些带有0个20px填充占位符的输入框。但是，我在其中键入的文本将忽略填充，并从确切的左侧开始（从左侧轮廓开始）。是否有可能将其放置在输入字段中？

HTML：

<div class="input-border">
    <label for="sign-login"><i class="fas fa-envelope"></i></label>
    <input type="text" name="sign-login" placeholder="Enter your Email">
</div>

CSS：

input::placeholder {
    font-size: 16px;
    font-family: $font-base;
    color: #979797;
    padding: 0 20px;
    height: 38px;
}

.input-border {
    width: 340px;
    margin: 10px 0;
    border: 1px solid #DEDEDE;
    border-radius: 0.5em;
}

我希望输入的文本从与占位符相同的地方开始在这种情况下，填充为0 20px。

Answer 1

定位输入文本输入[type = text] {padding：0 20px;}

input::placeholder{
    font-size: 16px;
    font-family: $font-base;
    color: #979797;
    padding: 0 20px;
    height: 38px;}
  .input-border
    form .input-container .input-border {
    width: 340px;
    margin: 10px 0;
    border: 1px solid #DEDEDE;
    border-radius: 0.5em;}
    input[type=text]{padding:0 20px;}

<div class="input-border">
     <label for="sign-login"><i class="fas fa-envelope"></i></label>
     <input type="text" name="sign-login" placeholder="Enter your Email">
    </div>

Answer 2

CSS：

.center {
  text-align: center;
  margin: 0;
}

Answer 3

使用它向占位符添加填充。

CALL    scripts/checksyscalls.sh
DESCEND  objtool
CHK     include/generated/compile.h
GEN     .version
CHK     include/generated/compile.h
UPD     include/generated/compile.h
CC      init/version.o
AR      init/built-in.a
AR      built-in.a
LD      vmlinux.o
built-in.a: member kernel/time/clockevents.o in archive is not an        
object
Makefile:1030: recipe for target 'vmlinux' failed
make: *** [vmlinux] Error 1

使用它在输入文本中添加填充。

input::placeholder {
    padding: 0 20px;
}

如何在输入元素中移动键入的文本？

3 个答案: