CSS - SearchBox 重叠 div 的填充答案

【问题标题】：CSS - SearchBox overlapping divs' paddingCSS - SearchBox 重叠 div 的填充
【发布时间】：2015-06-28 23:23:28
【问题描述】：

我遇到过很多次这个问题，但始终无法解决。

我基本上只有一个 20px 填充的 div，并且希望相对于 div 的可能宽度（包括填充）100% 适合搜索框。但搜索框不断与 div 的填充重叠。有人可以帮我吗？

<div class='content'>
        <form id='submit' action='' method=''>
            <input type='text' autofocus='on' placeholder='Search with DuckDuckGo' autocomplete='off' id='searchBox'>
        </form>

        <p>Lorem</p>
        <p>Lorem</p>
        <p>Lorem</p>
</div>

.content { # This is the main div!
   background-color: rgba(240,240,240, 1);
   padding: 20px;
   display: inline-block;
   text-align: center;
   margin-top: 25%;
   width: 40%;
   box-shadow: 0px 0px 20px 3px #101010;
}

#searchBox { # This here is the search box that keeps overlapping the padding from the content div...
   width: 100%;
   height: 30px;
   padding: 10px;
   font-size: 20px;
   border: 1px rgba(10,10,10, 0.2) solid;
   #border: none;
   color: rgba(10,10,10, 0.5);
   font-family: 'Roboto', 'Tahoma', 'sans-serif';
}

这是一个 JS fiddle 示例，可以更好地对其进行可视化。

【问题讨论】：

只需在#searchbox 中将宽度设为 90%
看到这个：jsfiddle.net/0e2Ljgr8/2
@Dev-One 您的解决方案从#searchbox 中删除了我猜可能不需要的填充
已更新：jsfiddle.net/0e2Ljgr8/4 添加内边距：5px

标签： html css input padding overlapping

【解决方案1】：

您可以删除#searchBox 的padding 属性并将padding-top 和padding-bottom 属性显式设置为10px（这将删除左右填充）。

#searchBox {
    width: 100%;
    height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    border: 1px rgba(10,10,10, 0.2) solid;
    color: rgba(10,10,10, 0.5);
    font-family: 'Roboto', 'Tahoma', 'sans-serif';
}

https://jsfiddle.net/0e2Ljgr8/1/

另一种解决方案是将#searchBox 的宽度减小到 90% 的宽度，如下 JSFiddle 所示：

https://jsfiddle.net/0e2Ljgr8/3/

【讨论】：

这几乎解决了这个问题。但是是否可以添加左右填充而不使搜索框与 div 的填充重叠？
@Dean - 是的，你也可以将宽度减小到 90%，我已经更新了我的答案以反映这一点。