css：ボタンが上に浮いています。それらを水平に揃えるには？

私は次のCSSがありますhtmlコードとcss：ボタンが上に浮いています。それらを水平に揃えるには？

img { border-style : none } 
a { text-decoration : none } 

#header { width : 100%} 
#header #topbar{width:705px; 
     padding:3px 10px 0 10px; 
     float:left; 
     height:30px; 
    line-height:22px; 
     background-color:#eee; 
     max-width:750px; 
     -moz-border-radius-bottomleft:3px; 
     -moz-border-radius-bottomright:3px; 
     -webkit-border-radius-bottom-left:3px; 
     -webkit-border-radius-bottom-right:3px; 
     } 

#header #logo { height : 61px; 
       width : 250px; 
       float : left;        

    } 

/* BUTTONS */ 

.buttons a, .buttons button{ 
    display:block; 
    float:right; 
    margin:0 7px 0 0; 
    background-color:#E0EEEE; 
    border:1px solid #dedede; 
    border-top:1px solid #eee; 
    border-left:1px solid #eee; 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
    font-size:100%; 
    line-height:130%; 
    text-decoration:none; 
    font-weight:bold; 
    color:#565656; 
    cursor:pointer; 
    padding:5px 10px 6px 7px; /* Links */ 
} 
.buttons button{ 
    width:auto; 
    overflow:visible; 
    padding:4px 10px 3px 7px; /* IE6 */ 
} 
.buttons button[type]{ 
    padding:5px 10px 5px 7px; /* Firefox */ 
    line-height:17px; /* Safari */ 
} 
*:first-child+html button[type]{ 
    padding:4px 10px 3px 7px; /* IE7 */ 
} 
.buttons button img, .buttons a img{ 
    margin:0 3px -3px 0 !important; 
    padding:0; 
    border:none; 
    width:16px; 
    height:16px; 
    } 
/* POSITIVE */ 

button.positive, .buttons a.positive{ 
    color:#529214; 
} 
.buttons a.positive:hover, button.positive:hover{ 
    background-color:#E6EFC2; 
    border:1px solid #C6D880; 
    color:#529214; 
} 
.buttons a.positive:active{ 
    background-color:#529214; 
    border:1px solid #529214; 
    color:#fff; 
}

：

<body> 
<div id="header"> 
    <div id="topbar"> 
    <div id="logo"> 
    <a href="" > 
     <img src="images/logo-temp.png"> 
    </a> 
    </div> 
    <div id= "buttons"> 
    <div class="buttons"> 

     <a href="/password/reset/" class="positive"> 
      <img src="icons/arrow_up.png" alt=""/> 
      Send 
    </a> 

     <a href="/password/reset/" class="positive"> 
      <img src="icons/arrow_down.png" alt=""/> 
      Receive 
     </a> 

     <a href="#" class="positive"> 
      <img src="icons/user.png" alt=""/> 
      Users 
     </a> 
    </div> 
    </div> 

</div>

問題： は今のロゴは、しかし、右浮動3つのボタンを左に浮いているだけでなく、水平方向に整列しますトップ。どのようにしてこのボタンを修正すれば、すべてのボタンが同じ行のロゴ付きで一番下に並んでいますか？

出典

2009-07-13 phill

#header #logo 
{ 
    height : 61px; 
    width : 100%; 
    float : left;               
}

この宣言の後に角括弧を2回終了するエラーもCSSにあります。

推論： 現在、あなたが左に#header #logoを浮動しているが、それは右側に使用可能なスペースを残して、それを親コンテナの幅を埋めていません。あなたがボタンをフロートさせるとき、それらはこの自由空間に入るので、左のフロートを全幅に増やすことによってそれを満たす必要があります。

JSBin、作業デモ

出典

2009-07-13 01:50:03

デモをありがとう。助けになる。それは間違いなく良いそれをシフトします。それらをすべて平準化する方法に関するアドバイスはありますか？ – phill

ボタンクラスに余白を付けてボタンを押し下げます。

.buttons {margin-top:30px;}

編集コメント

後にあなたは正しいCSSで.buttons aの上にそれを置く<div class="buttons">

にマージンを追加したいです。

/* BUTTONS */ 
.buttons {margin-top:30px;} 
.buttons a, .buttons button{ 
... 
}

出典

2009-07-13 02:16:33 Emily

私はmargin-topを追加しました：30px; .buttonsボタン{}には何もしていないようです。これは正しい場所ですか？ – phill

.buttonsボタンは有効なセレクタではありません –

@an：本当ですか？何故なの？ –

css：ボタンが上に浮いています。それらを水平に揃えるには？

答えて

関連する問題