logo标签列表

如何在输入框中将光标向右移动一小步

htmlcss
8
我创建了一个div和一个输入框。在输入框中，我设置了自动聚焦。当页面加载时，光标会聚焦在输入框上。但是光标碰到边框，所以我看不清楚光标。有没有办法将光标从左侧移动到右侧。我只希望光标触摸到单词添加一个列表的前面。明显的例子可以在Stack Overflow页面和标题区域找到。请给出建议。谢谢。 

<div  
    style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
    <input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "  Add a List...">
</div>

padding 或 text-indent - Rayon
4个回答
8

如@Rayon所说，使用padding样式。

.list-name-field {
  padding: 0 10px;
}
<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px;">
  <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0;" type="text" name="" placeholder="Add a List...">
</div>

3
你可以使用text-indent或padding来设置。 

input[type=text]{
  text-indent:15px;
}   

/*OR*/

input[type=text]{
  padding:0px 15px;
}
<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; ">

    <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder="  Add a List...">
</div>

1
在您的占位符中添加了一个空格，只需删除该空格，不需要在此处添加Css。
请尝试以下操作。 

<div  style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
       
       <input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "Add a List...">
       </div>

以上代码没有任何区别，和我的一样，请检查。 - Melbin Mathai
请检查 placeholder = "添加列表..." 部分。 - Vatsal Shah
但是，我需要占位符词和光标应该从边框稍微移动一下。现在它正在触摸边框。看一下。 - Melbin Mathai
0
使用CSS中的padding-left，以便在左侧给它一个填充，光标将自动从您定义的距离设置。
#SAVE_LIST{
   padding-left:10px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接