Как выровнять справа элемент inline-block?

Question

Как вы можете видеть в следующей скрипте: http://jsfiddle.net/EvWc4/3/, В настоящее время я ищу способ выровнять вторую ссылку (link-alt) с правой стороны его родителя (p).

Почему бы не использовать float или position?

При использовании float или position: absolute; Я буду вынужден подсчитать и поставить какое-то дополнительное значение margin-top или top для выравнивания ссылок по вертикали.

Вот код, но лучше посмотри на скрипку http://jsfiddle.net/EvWc4/3/:

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

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

Answer 1

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

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

Если вы можете немного пострадать от дополнительного 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>

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

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

Answer 2

Для этого с помощью CSS3 вы можете использовать модель flex box

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/

Answer 3

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

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

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

Answer 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/

Answer 5

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

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

Answer 6

Атрибут float не имеет отношения к вертикальному расположению элемента.

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

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

Справочная статья

Answer 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;
}