棒按鈕的div右側

我需要什麼，以便堅持的按鈕div的右側上的同一行頭添加？

HTML：

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

CSS：

div { 
    background: purple; 
} 

div h1 { 
    text-align: center; 
} 

div button { 
}

更具體地：

按鈕的右側應該是x像素遠離div的右邊緣。
它應該與標題位於同一行。
應包含在div（這樣的東西浮或相對定位彈出出來的div視覺）

什麼CSS技術可用於做到這一點？謝謝。

來源

2013-05-30 Andrew

通常我會建議浮動但是從你的3個條件，我建議這樣的：

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

不要在父DIV忘記position: relative;

DEMO

來源

2013-05-30 09:24:59 Andy

希望得到downvoters的反饋意見。似乎完全按照OP的要求工作？ – Andy

謝謝，這個作品很棒。我試過這個，但忘了把它放在div下面的'top'屬性。 – Andrew

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

}

來源

2013-05-30 09:26:31 Ahmed

謝謝。這和上面的一樣，我也試過這種方法，但沒有在按鈕元素下應用'clear：both'。我很接近！ – Andrew

更改CSS如下：

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

來源

2013-05-30 09:58:16 Aravind30790

這取決於正是你想要達到的目標。

如果你只是想把它放在正確的位置，那麼我建議不要使用絕對位置，因爲它會打開一整條蠕蟲。

的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>負利潤率，並在<div>

編輯overflow: hidden; 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-30 10:16:33 ramsesoriginal

你能詳細闡述一下這個'overflow：hidden'如何在這種情況下提供幫助嗎？那也是負值。 – JohnnyQ

使用position屬性

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

來源

2015-03-12 13:50:36

另一種解決方案：改變利潤。根據按鈕的兄弟，display應該被修改。

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

來源

2016-05-25 09:42:30 Tonatio

棒按鈕的div右側

回答

相關問題