3

親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>
4

2 に答える 2

2

境界線のある比較的配置された要素の内側に絶対的に配置された要素があるため、境界線内に配置すると、ピクセル単位で見えなくなります。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-11T04:40:23.697 に答える
1

それは2つのことです:外側からの1pxの境界線と、一方を他方の内側<div>に配置することを選択したという事実です。<div>

1pxの境界線は、の左端のマークの外側に配置されleft: 0px;ます。境界線を削除すると機能します。

デモ: http: //jsfiddle.net/MmwYv/

内側の<div>.ButtonContentを、外側の.Buttonの外側に表示する必要があります<div>。内側のものは外側のものの測定によって制限されるので、それは問題を引き起こすでしょう。.ButtonContentを外部に持っていくと、それも機能します。

デモ: http: //jsfiddle.net/NxCp4/

于 2012-08-11T04:40:09.697 に答える