在输入中移动文本

Posted 2023-03-05

【中文标题】在输入中移动文本

【英文标题】：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的可能重复

【参考方案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 没有要求文本居中。请仔细阅读。