css - 子 div 距离与父级左侧齐平 1 个像素

Question

我有一个父 div，里面有一个子 div（子 div 充当弹出菜单）。当子 div 弹出时，它有一个很小的空间，因此它不会与父 div 的左侧对齐。

这是样式：

.ButtonContent
{
    display:none;
    border: solid 1px black;
    width:275px;
    position:absolute;
    left:0;
    margin:0px;
    padding:0px;
    float:left;
    background-color:#FFF;
    border-radius:0 0 4px 4px;
}
.Button
{
    margin:0px;
    padding:0px;
    border: solid 1px black;
    border-radius:4px 4px 4px 4px; 
    width:276px;
    text-align:center;
    position:relative;
}

这是HTML：

<div class="Button" id="Button1" >
    Add <br />
    <div class="ButtonContent" id="ButtonContent1">
         Date purchased:
         <div class="Date" id="datePurchased1"></div><br/>
         Purchase Location:<br />
         <input type="text" maxlength="150" /><br />
         <a>Add</a>
    </div>
</div>

score 2 · Accepted Answer

由于您有一个绝对定位的元素在一个相对定位的带有边框的元素内，left:0因此将其定位在边框内，使其看起来远离一个像素。

快速修复：使它们具有相同的宽度并left:-1px;改为使用。

http://jsfiddle.net/RtGfc/

在我看来，你不需要所有这些 CSS 来实现你想要的外观，也许是一个更好的修复（不接触你的 HTML）：

.ButtonContent
{
    border-top: solid 1px black;
    background-color:#FFF;
    border-radius:0 0 4px 4px;
}
.Button
{
    border: solid 1px black;
    border-radius:4px; 
    width:275px;
    text-align:center;
}

http://jsfiddle.net/RtGfc/1/