在输入中移动文本答案

【问题标题】：Moving text in input在输入中移动文本
【发布时间】：2016-07-21 13:19:30
【问题描述】：

我无法在输入中移动文本。如果我添加边距或填充，它会移动或缩放输入。我想将“用户名”从左侧移动 10 像素。

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

【问题讨论】：

您的意思是要将占位符文本推到右侧？
HTML5 placeholder css padding的可能重复

标签： html css

【解决方案1】：

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

::-webkit-input-placeholder {
   padding-left: 10px;
}
::-moz-placeholder { 
   padding-left: 10px;
}
:-ms-input-placeholder {  
   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>

【讨论】：

【解决方案2】：

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

在以下示例中，两个输入的大小相同，但我为用户名 1 提供了左填充。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

您可以通过

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

input {
  text-indent: 10px;
}

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

【讨论】：

【解决方案5】：

看看可能对你有帮助

input{
    text-align:center;
}

【讨论】：

OP 没有要求文本居中。请仔细阅读。