разместить гиперссылку возле правого края элемента - PullRequest
Новая
       8

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

0 голосов
/ 29 октября 2011

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

Ответы [ 3 ]

0 голосов
/ 29 октября 2011

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

0 голосов
/ 29 октября 2011

Вот более «классическое» решение (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;   
}
0 голосов
/ 29 октября 2011

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

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

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

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

HTML должен также иметь переключаемые текстовые поля и кнопки.

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

...