html - 如何在页眉中将两个表单按钮堆叠在一起？

Question

我试图在页眉中将两个表单按钮堆叠在一起。我有以下 html 代码:

<header class="global-header">

            <img class="logo" src="http://placehold.it/100x100" alt="logo" />    

        <div class="signup">
             <a href="#">
                    <div class="button"></div>
                    <div class="button"></div>
        </a>
    </div>

和以下CSS:

.global-header {
    overflow: hidden; 
}

.logo {
    margin-left: 200px;
    display: block;  
    float:left;
}
.button{
    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: yellow;
    float:right;    
}
.button2{

    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: red;
    float: right;
}

然而，这些按钮似乎堆叠在彼此之上，而不是一个在上一个在下。这是我要完成的工作的图片。

Answer 1

fiddle : http://jsfiddle.net/logintomyk/7VXV2/

是什么原因造成的: 由于您已将 float 分配给按钮，因此它们将出现在同一行中。修改:从 button 中移除 float 并将其分配给 signup 类

CSS

.signup{float:right}
.button{
    border: 1px solid black;
    height: 25px;
    width: 100px;
    background-color: yellow;
}