48

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

すなわち：

  1. ボタンの右側は、div の右端から x ピクセル離れている必要があります。
  2. ヘッダーと同じ行にある必要があります。
  3. div に含まれている必要があります (float や相対配置のようなものは、視覚的に div から飛び出します)

これを行うには、どのような CSS テクニックを使用できますか? ありがとう。

4

8 に答える 8

65

通常はフローティングをお勧めしますが、あなたの 3 つの要件から、次のことをお勧めします。

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

position: relative;親divを忘れないでください

デモ

于 2013-05-30T09:24:59.983 に答える
25

別の解決策: マージンを変更します。ボタンの兄弟に応じて、display変更する必要があります。

button {
  display: block;
  margin-left: auto;
  margin-right: 0;
}
于 2016-05-25T09:42:30.650 に答える
22

それは、正確に何を達成したいかによって異なります。

右側に配置したいだけの場合は、絶対位置を使用しないことをお勧めします。

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/

明らかな例では、指定されたフォントサイズのマージントップを調整する必要があります<h1>

編集：

ご覧のとおり、 からはみ出さず、<div>中に入っています。<button>これは、 の負のマージンとの の 2 つのことによって達成されます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/

于 2013-05-30T10:16:33.890 に答える
0

CSS を次のように変更します。

div button {
position:absolute;
    right:10px;
    top:25px;
}
于 2013-05-30T09:58:16.763 に答える