Прикрепите кнопку к правой стороне div

http://jsfiddle.net/kn5sH/

Что мне нужно добавить, чтобы вставить кнопку в правую часть div в той же строке, что и заголовок?

HTML:

<div>
    <h1> Ok </h1>
    <button type='button'>Button</button>
</div>

CSS

div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
}

Более конкретно:

  • Правая часть кнопки должна быть в пикселях вправо от правого край div.
  • Он должен быть в той же строке, что и заголовок.
  • Должен содержаться в div (материал типа float или relative позиционирование выводит его из div визуально)

Какие методы CSS можно использовать для этого? Спасибо.

Ответы

Ответ 1

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

position: absolute;
right: 10px;
top: 5px;

Не забывайте position: relative; в родительском div

DEMO

Ответ 2

Это зависит от того, чего именно вы хотите достичь.

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

HTML также может быть неизменным:

HTML

<div>
    <h1> Ok </h1>
    <button type='button'>Button</button>
</div>

CSS тогда должен быть чем-то вроде:

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-right: -50%;
}

div button {
    float: right;
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/azhH5/

Если вы можете изменить HTML, он становится немного проще:

HTML

<div>
    <button type='button'>Button</button>
    <h1> Ok </h1>
</div>

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-left: -50%;
}

Вы можете увидеть это в действии: http://jsfiddle.net/8WA3k/1/

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

HTML

<div>
    <button type='button'>Button</button>
    <h1> Ok </h1>
</div>

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-left: -50%;
    margin-top: 2em;
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/EtqVh/1/

Cleary в последнем примере вам нужно будет настроить поле margin для указанного размера шрифта <h1>

РЕДАКТИРОВАТЬ:

Как вы можете видеть, он не выскользнет из <div>, а пока изнутри. это достигается двумя вещами: отрицательное поле <button> и overflow: hidden; на <div>

РЕДАКТИРОВАТЬ 2:

Я только что увидел, что вы также хотите, чтобы он был немного дальше от поля справа. Это легко достижимо с помощью этого метода. Просто добавьте margin-right: 1em; на <button>, вот так:

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-left: -50%;
    margin-top: 2em;
    margin-right: 1em;
}

Вы можете увидеть это в действии здесь: http://jsfiddle.net/QkvGb/

Ответ 3

Другое решение: изменить поля. В зависимости от братьев и сестер кнопки display следует изменить.

button {
    display:      block;
    margin-left:  auto;
    margin-right: 0;
}

Ответ 4

<div>
    <h1> Ok </h1>
    <button type='button'>Button</button>
    <div style="clear:both;"></div>
</div>

CSS

div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-right:10px;

}

Ответ 5

Использовать свойство позиции

style="position: absolute;right:0;top:0"

Ответ 6

измените CSS следующим образом:

div button {
position:absolute;
    right:10px;
    top:25px;
}

Ответ 7

div{
 display: flex;
 flex-direction: row-reverse;
}