在输入中移动文本

Question

我在输入中移动文本时遇到问题。如果我添加边距或填充，它会移动或缩放输入。我想将“用户名”从左侧移开10px。

.log_inp input[type="username"] {
  top: 80px;
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
}
input {
  padding: 0px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

Answer 1

如果您想更改填充但不影响填充的总大小，请将box-sizing设置为border-box。

在下面的示例中，两个输入的大小相同，但我给了一个左侧填充的用户名。

.log_inp input {
  top: 80px;
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
  padding: 0px;
  box-sizing: border-box;
}
input[type="username"] {
   padding-left:10px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

Answer 2

如果您只想移动占位符，请使用供应商前缀CSS属性：

＆＃13;

＆＃13;

::-webkit-input-placeholder {
   padding-left: 10px;
}
::-moz-placeholder { 
   padding-left: 10px;
}
:-ms-input-placeholder {  
   padding-left: 10px;
}

＆＃13;

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.log_inp input[type="username"] {
 
  height: 28px;
  width: 234px;
  border: solid 1px #e4e4e4;
  font-family: OpenSans-Italic;
  color: #9a9a9a;
  font-size: 13px;
 padding-left:10px;
}
input {
  padding: 0px;
}

<div class="log_inp">
  <form action="#">
    <input type="username" name="Username" placeholder="Vārds...">
    <br>
    <input type="password" name="Password" placeholder="Parole...">
    <br>
    <input type="submit" value="Ienākt">
  </form>
</div>

Answer 4

使用接受的答案光标输入位置不会被修改。

您可以通过

移动输入的占位符文本及其光标位置

input {
  text-indent: 10px;
}

https://www.w3schools.com/csSref/pr_text_text-indent.asp

Answer 5

查看它可能有帮助你

input{
    text-align:center;
}