用CSS水平顯示div

我是新來的網頁設計，我嘗試用幾種方法將我的按鈕<div> s水平放置在一個<div>中。我嘗試使用display:inline-block和float:left，但都沒有工作。請有人可以告訴我什麼是錯誤there：用CSS水平顯示div

來源

2013-03-04 Hued Bafuli

http://jsfiddle.net/wZf4C/1/ – 2013-03-04 14:23:58

請發表您的問題代碼，以及的jsfiddle鏈接是：http：/ /meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase 2013-03-04 14:24:51

我需要的是把第一個3按鈕（迴音，像，評論）horizobtally和第二個3按鈕相同方式是水平的 – 2013-03-04 14:25:09

Yowza！調試的第一條規則：簡化您的條件。你有大量的CSS包裝在那個小提琴中，這讓任何人都難以解決你的問題。

你有兩件事阻止你的按鈕水平地出現在同一行上。

.pin .actions { 
    width: 125px; 
}

這使得容器太窄，不足以容納每行多於一個的按鈕。嘗試將其改爲300px。（或者，你知道的，還有更大的。）

.actions .WhiteButton.Button11 { 
    clear: both; 
}

這種風格意味着沒有浮動元素被允許要麼向右或按鈕的左側。

更改這兩個，你應該有你想要的。

http://jsfiddle.net/nate/wZf4C/2/

來源

2013-03-04 14:30:34 Nate

謝謝，它的工作。非常感謝 – 2013-03-04 14:34:14

我很高興它的工作！你應該繼續並接受答案。我建議接受Eamon Nerbonne's，因爲我們的答案是一樣的，而Eamon是第一個。 – Nate 2013-03-04 14:44:30

你有一個clear:both聲明在那裏有效地廢除你的float:left;。另外，你的div包含一個125px的小尺寸，這對你的浮動物來說可能太小了。您可以讓容器自動調整大小，並在進入圖形設計階段後再限制大小。

此外，你有很多不必要的，可能有bug的標記在那裏。在投入大量時間和金錢進行維護之前，您應該考慮進行系統重寫。很可能您可以以更簡單，不易出錯的方式獲得相同的佈局。

來源

2013-03-04 14:29:36

謝謝，它的工作。非常感謝 – 2013-03-04 14:33:12

<style> 
.grid{ 
    width:200px; 
    height:200px; 
    background-color:#666666; 
    float:left; 
    margin:5px; 
} 
</style> 

<div class="grid">Div 1</div> 
<div class="grid">Div 2</div> 
<div class="grid">Div 3</div>

來源

2013-03-04 14:32:31

我認爲，一個簡單的CSS代碼行解決您的問題。

maring-left:auto; 
margin-right:auto;

時，我想我對齊用這一招div或span水平

來源

2013-03-04 15:06:59 jameson

用CSS水平顯示div

回答

相關問題