子div與父母的左邊齊平1像素

我有一個父div與裏面有一個子div（子div作爲彈出菜單）。當子div彈出時，它有一個很小的空間，所以它不與父div的左邊排隊。子div與父母的左邊齊平1像素

這裏的風格：

.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>

來源

2012-08-11 Snowburnt

這是兩件事情：從外面<div>的1px的邊框和事實，你選擇了把一個<div>其他內。

1px邊框位於left: 0px;最左邊的標記之外。如果你刪除了邊框，它會起作用。

演示：http://jsfiddle.net/MmwYv/

你想.ButtonContent，這是內<div>，要顯示.Button，這是外<div>之外。這會導致問題，因爲內部的一個將受到外部測量的限制。如果你把.ButtonContent外面，它也可以。

演示：http://jsfiddle.net/NxCp4/

來源

2012-08-11 04:40:09 depa

就是這樣！我認爲我已經有了這樣的JavaScript樣本來利用它是另一個孩子工作的事實。但是，我從來沒有能夠獲得該功能的正確工作，並且已經解決了這個問題，所以這使一切正常。 – Snowburnt 2012-08-11 10:08:34

既然你有絕對定位的元素內一個相對定位一個具有邊框，這使得它由像素看起來關閉境內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/

來源

2012-08-11 04:40:23

這大部分工作，除了我必須在第一個與第二個絕對的相對位置，以便該div可以彈出而不會擾亂頁面流。我在內容的左側添加了定位中心，因此我必須重新添加浮動和左側定位。之後，我必須調整內容的寬度和邊界以使其排列。背景技巧雖然在錢上。 – Snowburnt 2012-08-11 10:06:42

子div與父母的左邊齊平1像素

回答

相關問題