Как выровнять по правому краю элемент встроенного блока?

Ответ 1

Чтобы сделать это с помощью CSS3, вы можете использовать модель гибкой коробки

HTML:

<div class="content">
    <div class="box box1"><a>Link 1</a></div>
    <div class="box box2"></div>
    <div class="box box3"><a>Link 2</a></div>
</div>

CSS

.content {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.box2 {
    box-flex: 1;
}

(требуется префикс поставщика)

http://jsfiddle.net/EvWc4/18/

Ответ 2

Элементы CSS3 flex и grid предназначены для решения этих проблем, но стандартная поддержка остается пятнистой по состоянию на 2013 год.

Вернемся к реальному миру. Я не думаю, что это можно сделать в CSS2.1 (IE8 +) без пиксельных хаков. Дело в том, что выравнивание текста контролируется родительским элементом, и поскольку два якоря разделяют их родительские элементы, они либо выравниваются влево, либо вправо. И оправдание не работает в последней строке.

Если вы можете пострадать от небольшого дополнительного HTML, есть два подхода:

1) Добавьте еще одну встроенную строку, которая гарантированно завернет линию, а затем попытается скрыть пустую строку. Это позволяет использовать выравнивание текста для родителя.

<p>
    <a href="#" class="link">link</a>
    <a href="#" class="link link-alt">link alt</a>
    <span class="boom"></span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
        text-align: justify
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        height: 0;
        width: 100%
    }
</style>

Плюсы: работает с любым количеством встроенных блоков, а не с двумя. Требуется только небольшой дополнительный HTML.

Минусы: требуется дополнительное усилие, чтобы скрыть последнюю (пустую) строку текста (установка встроенного блока внутри него на 0 высот не поможет вам), и вам придется играть с полями или чем-то еще чтобы он действительно работал. Дальнейшее обсуждение: Как я * действительно * оправдываю горизонтальное меню в HTML + CSS?

2) Добавьте еще один слой встроенных блоков поверх ваших якорных тегов и доведите их до 50%. Затем вы можете применить отдельный выравнивание текста, чтобы получить окончательный макет, который вы запросили. Важно, чтобы между двумя встроенными блоками не было пробелов размером до 50%, или вы завернете линию.

<p>
    <span class="left">
        <a href="#" class="link">link</a>
    </span><span class="right">
        <a href="#" class="link link-alt">link alt</a>
    </span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        width: 50%
    }

    .left {
        text-align: left
    }

    .right {
        text-align: right
    }
</style>

Плюсы: производит точный макет, который вы запросили, не загрязняя внешнюю коробку.

Минусы: работает только для двух встроенных блоков (вы можете попытаться расширить его, но он быстро становится очень сложным). Опираясь на отсутствие лишних пробелов, которые могут поставить под угрозу вашу красиво отформатированную разметку.

Ответ 3

Вы можете установить position на absolute и использовать right: 0

.wrapper {
    position: relative;
}
.right {
    position: absolute;
    right: 0;
}

http://jsfiddle.net/EvWc4/13/

Ответ 4

Я считаю, что это выполняет то, что вы ищете:

.link-alt {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    margin: auto;
    max-height: 1em;
}

Вы можете использовать position: absolute и right: 0 для получения правильного выравнивания. Чтобы сохранить вертикальное центрирование, вы можете использовать top: 0; bottom: 0; margin: auto;. Конечно, вам также нужно будет установить высоту элемента, или он будет растягиваться до полной высоты его родителя.

Здесь jfiddle: http://jsfiddle.net/pHppA/

Ответ 5

Я обновил пример Pethas, так что это можно сделать в чистом CSS2. Он не работает в IE7, так как он не поддерживает display: table-cell;, который я использую.

http://jsfiddle.net/EvWc4/133/

Ответ 6

Атрибут float не влияет на вертикальное позиционирование элемента.

p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}

должен выполнить то, что вы ищете. Установка переполнения родителя на что-то, кроме него по умолчанию (видимое) заставит его обрабатывать плавающих детей, как обычные элементы.

Ссылка статьи

Ответ 7

Я не тестировал это вообще вне Chrome, поэтому он мог бы сосать для IE.

Это простое (и ограниченное) решение использует text-align: right и width: 50% для выровненных дочерних элементов и white-space: nowrap для родителя для достижения желаемого результата.

Пример: http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module {
    white-space: nowrap;
}

.vertically-centered-module > * {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.vertically-centered-module > :last-child {
    text-align: right;
}