Как бы я поместил две кнопки формы друг на друга в заголовке?

Question

Как бы я поместил две кнопки формы друг на друга в заголовке?

0

Я пытаюсь складывать две кнопки формы друг на друга в моем заголовке. У меня есть следующий код для 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;
}

Однако кнопки, кажется, складываются друг на друга, а не сверху и снизу. Вот картина того, что я пытаюсь выполнить.

J-LO 02 дек. 2013, в 09:17

Источник

Теги:

html

css

2 ответа

Ещё вопросы

NoobEditor · Answer 1 · 2013-12-02T04-49-00.000Z

Скрипт: http://jsfiddle.net/logintomyk/7VXV2/

Что вызывает это: поскольку yo назначил поплавок кнопкам, они появятся в одной строке. Ammemdement: удалить float из button и назначить ее классу signup вместо

CSS

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

Kishori · Answer 2 · 2013-12-02T06-03-00.000Z

Вы можете попробовать использовать свойство clear: left to class.button

Ниже приведен CSS

.button {
    background-color: #FFFF00;
    border: 1px solid #000000;
    clear: right;
    float: right;
    height: 25px;
    width: 100px;
}