0

作成した DIV ポップアップにいくつかのボタンを配置しようとしています。ボタンを隣り合わせにしたいのですが、うまくいかないようです。float:left を追加してみましたが、効果がないようです。助言がありますか？前もって感謝します。

    <div id="pop_box">Hello there sir!
    <div class="pop_buttons">Update Quantity</div> 
    <div class="pop_buttons">Check Out</div> 
    <div class="pop_buttons">Close Cart</div>
    </div>

CSS は次のとおりです。

div.pop_box
{
z-index:3;
width:70%;
height:70%;
bottom:20%;
right:15%;
overflow:auto;
background-color:#434343;
position:absolute;
border-color:#808080;
border-style:solid;
border-collapse:collapse;
border-width:1px;
padding: 10px 10px 10px 10px;
}

div.pop_buttons 
{
z-index: 4;
margin: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
bottom: 30%;
right: 30%;
font-family: 'Segoe UI', Arial;
font-size: 12px;
vertical-align:middle;
background-color:#808080;
}

更新: ボタンはコンテナー "pop_box" に含まれていることに注意してください... pop_box には position:absolute があるため、これは大きな違いになります。

4

3 に答える 3

2

ボタンを別のものでラップしてdivに追加float: leftするとpop_buttons、きれいに並べられます

<div id="pop_box">Hello there sir!
    <div>
        <div class="pop_buttons">Update Quantity</div>
        <div class="pop_buttons">Check Out</div>
        <div class="pop_buttons">Close Cart</div>
    </div>
</div>

CSS:

div.pop_buttons {
    z-index: 4;
    margin: 10px;
    width: 100px;
    height: 20px;
    line-height:20px;
    text-align:center;
    bottom: 30%;
    right: 30%;
    font-family:'Segoe UI', Arial;
    font-size: 12px;
    vertical-align:middle;
    background-color:#808080;
    float: left;
}

JSFiddle

于 2013-05-10T21:47:24.237 に答える
1

以下を試すことができます (デモを参照してください: http://jsfiddle.net/Z9vCb/ ):

HTML

<div id="pop_box">Hello there Sir!
     <br/>
    <div class="pop_buttons">Update Quantity</div> 
    <div class="pop_buttons">Check Out</div> 
    <div class="pop_buttons">Close Cart</div>
</div>

CSS

div.pop_box {
position:absolute;
z-index:3;
background-color:#434343;
border-color:#808080;
border-style:solid;
padding: 10px 10px 10px 10px;
}

div.pop_buttons {
float:left;
position:relative;
margin-right: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
font-family: 'Segoe UI', Arial;
font-size: 12px;
background-color:#808080;
}

注: これは「クリーンアップされた」CSS バージョンです。元のバージョンには無関係なプロパティが多数含まれているため、この場合は適用できないようです。

于 2013-05-10T21:55:20.460 に答える
1

あなたの CSS セレクターは正しくdiv#pop_boxありません div.pop_box。また、質問にfloat:leftforがありません。div.pop_buttonsそれ以外の場合は、すべて期待どおりに機能するはずです。

デモ: http://jsbin.com/ulukid

于 2013-05-12T02:48:08.867 に答える