我正在处理自动完成表单,但我似乎在文本和提交表单之间的填充方面存在一些问题。 我似乎无法调整文本和提交项目之间的间距,我需要这样做,因为当我增加文本字段的大小时,它会覆盖提交按钮。我相信我已经尝试了所有类型的填充,但它们什么也没做。 有人可以给我一个线索吗?
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
将box-sizing: border-box
添加到input[type=text]
- 默认的内容框设置意味着当您向元素添加padding
时,它会增加其维度。
请参阅下面的演示:
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
box-sizing: border-box; /* added */
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
您可以在此处查看更多示例:
-
添加边框到div 增加div 宽度?
-
边框框未按预期工作
您是否尝试过在输入文本和提交按钮之间使用
?
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid;
padding: 5px;
font-size: 24px;
}
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
}
input[type=submit] {
margin-left: 5px;
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
input[type=submit] {}
中增加margin-left
的值,如下所示:
input[type=submit] {
margin-left: 10px; /* increased value */
padding: 5px;
background: #ccc;
cursor: pointer;
-webkit-border-radius: 5px;
border: 1px solid;
background-color: DodgerBlue;
border-color: #CCCCCC;
color: #fff;
}
或将边距右添加到上一个元素,如下所示:
input[type=text] {
border-color: #808080;
background-color: #fff;
width: 100%;
-webkit-border-radius: 5px;
padding: 5px;
margin-right: 5px; /* add margin right */
}