CSS

Question

这个问题我遇到过好几次了，一直没能解决。

我基本上只有一个带 20 像素填充的 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 示例，可以更好地形象化它。

Answer 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/

CSS - 搜索框重叠 div 的填充

CSS - SearchBox overlapping divs' padding

html

input

padding

overlapping