Question

我有这个问题很多次，但从来没有能够解决它。

我基本上只有一个带有20px填充的div，并希望搜索框相对于div的可能宽度（包括填充）100％。但是搜索框保持与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';
}

{{1}}

这是一个The Java Tutorials - Nimbus Look and Feel示例，可以更好地将其可视化。

Answer 1

您可以删除padding的{{1}}属性，并明确将#searchBox和padding-top属性设置为10px（这将删除左右填充）。

padding-bottom

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

另一种解决方案是将#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'; }的宽度减小到90％宽度，如此JSFiddle所示：

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

CSS - SearchBox重叠divs'填充

1 个答案: