Простая проблема CSS: текст заголовка вверху слева, кнопка вверху справа - PullRequest
Новая
       16

Простая проблема CSS: текст заголовка вверху слева, кнопка вверху справа

3 голосов
/ 13 июля 2009

У меня есть страница, на которой мне нужно, чтобы фрагмент текста был выровнен по верхнему левому краю абсолютно позиционированного элемента (промежуток, если это имеет значение), и кнопка, которая должна быть выровнена по верхнему правому углу того же элемента. edit: Проблема с этим даже в том случае, если я использую float: right; и display: inline;, кнопка по-прежнему любит отбрасывать следующую строку.

В настоящее время мое решение состоит в том, чтобы обернуть кнопку с помощью элемента span, переместить его вправо и затем установить кнопку в абсолютное положение. Проблема в том, что он не появится, если я вручную не укажу ширину диапазона оболочки, чтобы он соответствовал размеру, который браузер отображает на кнопке. Что довольно глупо.

Как правильно это сделать?

edit 2: Вот мой оригинальный код: 

#header
{
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: hidden;
}


/* Header's buttons. */
#header > span
{
    float: right;
    width: 100px;
}
#header > span > button
{
    position: absolute;
}

И HTML: 

<span id="header">
    Trigger editor
    <span><button type="button" id="h_output">Output Triggers</button></span>
</span>

Ответы [ 2 ]

4 голосов
/ 13 июля 2009

Надеюсь, я правильно понял. 

<div class="clearfix">
  <div style="float:left">Text</div>
  <div style="float:right">Button</div>
</div>

Где clearfix является известным (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/).). Таким образом, я не думаю, что вам нужно явно устанавливать ширину текста или кнопки.

1 голос
/ 13 июля 2009

Я считаю, что «правильный» способ использовать DIV (не SPAN) для позиционирования элементов. Но да, вы должны были бы явно установить ширину для плавающего DIV слева, иначе это займет всю строку (будучи элементом блока и все). Просто убедитесь, что вашей ширины достаточно для отображения всего содержимого DIV без переполнения.

...