przycisk Trzymać się prawej strony div

Question

http://jsfiddle.net/kn5sH/

Co muszę dodać, aby trzymać przycisk po prawej stronie div na tej samej linii, co nagłówek?

HTML:

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

CSS:

div { 
    background: purple; 
} 

div h1 { 
    text-align: center; 
} 

div button { 
} 

Dokładniej:

1. Po prawej stronie przycisku powinno być x pikseli od krawędzi div prawo .
2. Powinien znajdować się w tej samej linii, co nagłówek.
3. powinny być zawarte w div (rzeczy jak pływaka lub względnej pozycjonowania wyskakuje go z div wizualnie)

Co CSS techniki mogą być wykorzystywane, aby to zrobić? Dzięki.

Answer 1

Normalnie Polecam pływający ale z własnymi wymaganiami 3 Proponuję to:

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

Nie zapomnij position: relative; na div

DEMO

Answer 2

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

} 

Answer 3

zmienić CSS następująco:

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

Answer 4

To zależy od tego, co dokładnie chcesz osiągnąć.

Jeśli chcesz go mieć po prawej stronie, zalecam, aby nie używać pozycji absolutnej, ponieważ otwiera ona całą puszkę robaków w linii.

HTML mogą być również bez zmian:

HTML

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

wówczas CSS powinno być coś wzdłuż linii:

CSS

div { 
    background: purple; 
    overflow: hidden; 
} 

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

div button { 
    float: right; 
} 

Można zobaczyć go w akcji tutaj: http://jsfiddle.net/azhH5/

Jeśli można zmienić kod HTML, a potem robi się nieco prostsze:

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

Możesz zobaczyć to w akcji: http://jsfiddle.net/8WA3k/1/

Jeśli chcesz mieć przycisk na tej samej linii, co tekst, można go osiągnąć w ten sposób:

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

Widzisz, że w akcji tutaj: http://jsfiddle.net/EtqVh/1/

Cleary w Lest przykład trzeba by dostosować margin-top dla określonego font-wielkości <h1>

EDIT:

Jak widać, to nie dostanie Popped z <div>, jest do wewnątrz. osiąga się to przez dwie rzeczy: ujemny margines na <button> i overflow: hidden; na <div>

EDIT 2:

Widziałem tylko, że chcemy także, że jest to nieco z dala od marży na prawo. Jest to łatwe do osiągnięcia dzięki tej metodzie. Wystarczy dodać margin-right: 1em; do <button>, tak:

div { 
    background: purple; 
    overflow: hidden; 
} 

div h1 { 
    text-align: center; 
} 

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

Można zobaczyć go w akcji tutaj: http://jsfiddle.net/QkvGb/

Answer 5

Zastosowanie pozycja nieruchomość

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

Answer 6

Innym rozwiązaniem: marginesy zmiana.W zależności od rodzeństwa przycisku, należy zmodyfikować display.

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