Question

我有以下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;
}

使用html代码：

<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个按钮向右浮动，但也与顶部水平对齐。如何修复此问题，以便所有按钮都与底部对齐，同一行上的徽标？

Answer 1

为按钮类添加边距以按下按钮。

.buttons {margin-top:30px;}

评论后编辑

您想要将保证金添加到<div class="buttons">

将它放在css的.buttons a上方。

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

Answer 2

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

您的CSS中也有一个错误，您在此声明后终止括号两次。

<强>推理：目前，您将#header #logo浮动到左侧，但它没有填充其父容器的宽度，在右侧留下可用空间。浮动按钮时，它们会落入这个自由空间，因此您需要通过将左浮动增加到整个宽度来填充它们。

JSBin，工作演示。

css：按钮浮动到顶部。如何水平对齐？

2 个答案: