H1 слева, "кнопки" справа, выровнены по вертикали

Я пытаюсь отобразить на одной строке:

  • элемент H1, выровненный слева от содержащего поля
  • несколько "кнопок" (элементы здесь) выровнены справа от содержащего поля
  • все на одной базовой линии

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

<div id="block1">
    <h1>What a great title</h1>
    <a href="javascript:void(0)">This link can kill you</a>
    <a href="javascript:void(0)">Click if you dare</a>
</div>

скрипка здесь показывает, что Я чувствую, что два несовместимых направления (встроенные блоки, и вы не можете выровнять вправо против float вправо, и вы не можете выровнять по вертикали): http://jsfiddle.net/GlauberRocha/bUsvX/

есть идеи?

8
alignment css css-float vertical-alignment

5 ответов

у вас есть потенциальная проблема с этим макетом - что делать, если ваш H1 слишком длинный, и поэтому кнопки? Они столкнутся друг с другом. Из - за этого не будет простого CSS - CSS не делает такую магию-это должно было бы подразумевать какое-то решение вышеуказанной проблемы.

однако то, что вы хотите, можно просто выполнить с помощью абсолютного позиционирования:

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

если вы действительно боитесь, что заголовок и якорный контейнер могут работать в каждом другое в зависимости от сгенерированного контента, вы можете использовать CSS max-width и overflow свойства, чтобы ограничить их содержащие поля некоторыми разумными значениями. Переполненный контент будет скрыт, но, по крайней мере, макет не сломается визуально. Я предполагаю, что следующая модификация вышеуказанного кода (простите дубликат) будет служить цели:

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

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

3

Я сделал это на своем сайте довольно давно: h2 слева и кнопка справа. Снимок экрана: cl.ly / изображение / 3K3i412F0M2t

код:

<div id="side_bar" class="clearfix">
  <h2 style="float: left;">Charity Map</h2>
  <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
8

трудно достигнуть без всех оборачивая элементов или фиксированных значений...

добавление фиксированной высоты линии к заголовку и ссылкам решит вашу проблему довольно быстро.

  • выровняйте свои ссылки с "display: block; float:right" вправо.
  • теперь установите "line-height: 40px;" как для заголовка, так и для ссылок

должно работать, но только тогда, когда размер заголовка не меняется....

0

один потенциальный подход к этому, в зависимости от ваших точных потребностей, заключается в использовании макета таблицы:

#block3 {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#block3 > * {
  display: table-cell;
}

#block3 > *:last-child {
  text-align: right;
}

JSFiddle: http://jsfiddle.net/bUsvX/39/

Если вы хотите, чтобы кнопки были строго выровнены правильно, я думаю, что это решение требует другого элемента для их обертывания:

JSFiddle: http://jsfiddle.net/bUsvX/40/

0

у меня была та же проблема.. Добавить display:inline к h1, затем для кнопок:float:right; display:inline;

пример (с использованием Twitter Bootstrap):

<h2 style="display:inline">Users</h2>

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a>

<form style="display:inline; float:right;">
   <input type="text" class="input-medium search-query" name="search">
   <button class="btn" type="submit">Search</button>
</form>
-1