Блог

Главная - Вопросы по программированию - разместить гиперссылку у правого края div

разместить гиперссылку у правого края div

#css #positioning #dreamweaver

#css #позиционирование #dreamweaver

Вопрос:

У меня есть три гиперссылки, я хочу расположить их у правого края div. Этот div расположен внутри другого div, называемого mainHeader. Вот что у меня есть:

 <div class="mainHeader">
<div id="Buttons">
<a href="#" class="myButton">New Customer</a>
<a href="#" class="myButton2">Sign In</a><br />
<input type="text" />
<a href="#" class="myButton3">Go</a>
</div>
</div>

и css — это пока что:

 .mainHeader
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
}

Итак, я хочу, чтобы все эти четыре элемента управления были расположены рядом с правым краем div ‘mainHeader’.
Первые две ссылки, MyButton и myButton2, должны быть в одной строке, а под ними должны быть текстовое поле и другая кнопка.
Есть идеи, как я могу это решить?
Заранее спасибо, Laziale

Ответ №1:

Я не уверен, что это лучший способ, но я просто изменил положение текстового поля с помощью кнопки, а затем добавил direction:rtl; правило css в mainHeader класс.

Вот скрипка: http://jsfiddle.net/QHuv3 /

Если ваш div основного заголовка содержит больше, чем просто кнопки div, и вы не хотите direction:rtl; , чтобы в нем было правило css, тогда вы могли бы сделать это:

 .mainHeader, #Buttons
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
}
#Buttons
{
  direction:rtl;
}

В HTML-файле также должны быть переключены места расположения текстового поля и кнопок.

Скрипка для этого второго случая: http://jsfiddle.net/QHuv3/1 /

Ответ №2:

это должно сделать это. вы захотите соответствующим образом изменить ширину / поля http://jsfiddle.net/jalbertbowdenii/YYaP2/1 /

Ответ №3:

Вот «более классическое» решение (http://jsfiddle.net/vUzBg /):

HTML:

 <div class="mainHeader">
    <div id="Buttons">
        <div class="top">
            <a href="#" class="myButton">New Customer</a>
            <a href="#" class="myButton2">Sign In</a>
        </div>
        <div class="bottom">
            <input type="text" />
            <a href="#" class="myButton3">Go</a>
        </div>
    </div>
</div>

CSS:

 .mainHeader
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
    overflow: auto;
}
.top, .bottom {
    float: right;
}
.bottom {
    clear: right;   
}
Метки: