CSS: кнопки всплывают наверх. Как мне выровнять их по горизонтали? - PullRequest
Новая
       11

CSS: кнопки всплывают наверх. Как мне выровнять их по горизонтали?

2 голосов
/ 13 июля 2009

У меня есть следующее 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 кнопки плавают вправо, но также выровнены по горизонтали вверх Как это исправить, чтобы все кнопки были выровнены по низу с логотипом на одной линии?

Ответы [ 2 ]

1 голос
/ 13 июля 2009

Добавьте поле к классу кнопок, чтобы нажимать кнопки вниз. 

.buttons {margin-top:30px;}

Редактировать после комментария

Вы хотите добавить поле к <div class="buttons">

Поместите это прямо выше .buttons a в CSS. 

/* BUTTONS */
.buttons {margin-top:30px;}
.buttons a, .buttons button{
...
}
0 голосов
/ 13 июля 2009 
#header #logo 
{ 
  height : 61px; 
  width : 100%; 
  float : left;                                                           
}

В вашем CSS также есть ошибка, когда вы дважды закрываете скобки после этого объявления.

Рассуждение: В настоящее время вы перемещаете #header #logo влево, но он не заполняет его шириной родительского контейнера, оставляя свободное пространство справа. Когда вы перемещаете кнопки, они попадают в это свободное пространство, поэтому вам необходимо заполнить их, увеличив левую часть до полной ширины.

JSBin , рабочая демоверсия.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...