Question

所以我有一个text类型的输入标签。现在，当我点击它时，它从盒子的最左侧接收输入，这看起来不太好。所以，我想知道如何让输入在左边保留一个空格。例如，如果我输入“汉堡”，它实际上将采用“汉堡”。有人可以帮我吗？

我的HTML代码是：

<form>
            <input type="text" id="search" placeholder=" Search for people, 
            place, locations">
            <input type="submit" id="search_button" value="">           
</form>

CSS代码是：

#search{
height: 34px;
width:486px;
margin-left: 18px;
margin-top: 6px;
position: relative;
align-self: top;
border-radius: 4px;
font-size:20px;
font-family: ariel;
background: #EEEEEE;
}

#search_button{
display: inline-block;
background: url(search_icon.png);
background-size: cover;
height: 28px;
width: 30px;
margin: 0 32%;
position: relative;
right: -36px;
top:-35px;
border: none;
float: left;
}

Answer 1

要获得预期结果，请在输入字段中添加填充

#search{
height: 34px;
width:486px;
margin-left: 18px;
margin-top: 6px;
position: relative;
align-self: top;
border-radius: 4px;
font-size:20px;
font-family: ariel;
background: #EEEEEE;
padding-left:5px;
}

#search{
  padding-left:5px;
}

<input type="text" value = "" id="nospace"><br>
<input type="text" value = "" id="search">

代码示例 - https://codepen.io/nagasai/pen/yKGwVz

为了检查差异，我使用了ids-search和nospace并添加了padding-left，可以根据需求进行调整

操纵我们在html中输入的方式

1 个答案: