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

我有以下的CSS：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个按钮的浮动权，但也水平对齐顶端。我该如何解决这个问题，以便所有按钮都与底部对齐并且徽标位于同一行上？

来源

2009-07-13 phill

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

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

推理： 目前你浮在#header #logo到左侧，但它不填充其父容器的宽度，留出空间可在右手边。浮动按钮时，它们会落入此空闲空间，因此需要通过将左侧浮动增加到全部宽度来填充它。

JSBin，工作演示。

来源

2009-07-13 01:50:03

感谢您的演示。它有助于。那肯定会把它降下来，这很好。任何关于如何让他们都平平的建议？ – phill 2009-07-13 03:09:48

向按钮类添加边距以按下按钮。评论

后

.buttons {margin-top:30px;}

编辑您想要的边距添加到<div class="buttons">

把它放在正上方的CSS .buttons a。

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

来源

2009-07-13 02:16:33 Emily

我加了margin-top：30px;到.buttons按钮{}，但它似乎没有做任何事情。这是正确的地方吗？ – phill 2009-07-13 02:47:09

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

回答

相关问题