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

19

Ссылка

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

HTML:

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

CSS

div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
}

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

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

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

    
задан Andrew 30.05.2013 в 11:22
источник

6 ответов

35

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

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

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

DEMO

    
ответ дан Andy 30.05.2013 в 11:24
источник
  • Поблагодарили бы обратную связь от downvoters. Кажется, работает точно так, как хочет? –  Andy 30.05.2013 в 11:42
  • Спасибо, это отлично работает. Я попробовал это, но забыл атрибут «top», который подтолкнул его под div. –  Andrew 30.05.2013 в 20:36
7

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

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

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

Вы можете увидеть это в действии здесь: Ссылка

Если вы можете изменить 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%;
}

Вы можете увидеть это в действии: Ссылка

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

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

Вы видите, что в действии здесь: Ссылка

В этом примере вам нужно будет отрегулировать маркер-верх для указанного размера шрифта <h1>

EDIT:

Как вы можете видеть, он не появляется из <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;
}

Вы можете увидеть это в действии здесь: Ссылка

    
ответ дан ramsesoriginal 30.05.2013 в 12:16
источник
  • Можете ли вы подробнее рассказать о том, как это переполнение: скрытые помогают в этой ситуации? и эта отрицательная маржа тоже. –  JohnnyQ 01.12.2016 в 04:09
3
<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;

}
    
ответ дан Ahmed 30.05.2013 в 11:26
источник
  • Спасибо. Это работает так же хорошо, как и выше, я также пробовал этот метод, но не использовал «clear: both», применяемый под элементом кнопки. Я был близко! –  Andrew 30.05.2013 в 20:38
2

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

button {
    display:      block;
    margin-left:  auto;
    margin-right: 0;
}
    
ответ дан Tonatio 25.05.2016 в 11:42
источник
1

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

style="position: absolute;right:0;top:0"
    
ответ дан Sunil Kumar 12.03.2015 в 14:50
источник
0

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

div button {
position:absolute;
    right:10px;
    top:25px;
}
    
ответ дан Aravind30790 30.05.2013 в 11:58
источник