aligning div中的按鈕

我遇到了問題，我只想在圖像旁邊的藍色div中間顯示2個鏈接按鈕。aligning div中的按鈕

我想是這樣的

link1 {space} link2 
{space} 
link3 {space} link 4

目前就是這個樣子

link1 
link2 
link3 
link4

這裏是我的代碼 HTML

<div class="list-wrapper"> 
<div class="my-background"> 
    <div class="div1" style="float:left;"> </div> 

     <span class="buttons"> 
     <a class="buttonStyling" href="test.com"><b>Link 1</b></a> 
     <a class="buttonStyling" href="test.com"><b>Link 2</b> </a> 
     <a class="buttonStyling" href="test.com"><b>Link 3</b> </a> 
     <a class="buttonStyling" href="test.com"><b>Link 4</b> </a> 
     </span> 
</div>

CSS

.my-background{ 
    background-color: #8af0fc; 
    height: 204px; 
} 
.div1 { 
    height: 205px; 
    background: url(http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg) no-repeat; 
    background-size: 435px; 
    font-weight: normal; 
    font-family: futura, arial, sans-serif; 
    text-align: center; 
    width:256px; 
    margin-bottom: -20%; 
} 
.buttons .buttonStyling{ 

    display: block; 
    height: 40px; 
    text-align: center; 
    line-height: 40px; 
    width: 35%; 
    float:right; 

} 

.buttonStyling { 

    background: rgb(255, 255, 255); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(225, 225, 225, 1))); 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%); 
    background: linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);  color: #333; 
}

這裏的jsfiddle

http://jsfiddle.net/cUWn8/4/

來源

2012-09-12 Autolycus

你想在四個角上的按鈕？你想讓它們之間的特定間距居中在div區中間嗎？ –

你對div1的計劃是什麼？現在它只是創建一個毫無意義的邊際，是否應該包含按鈕？你有足夠的額外樣式，不清楚你的實際意圖是什麼。 –

我仍然困惑於你想要的東西，左邊的圖像，右邊的藍色方塊和藍色的2個圖像，圖像上有2個按鈕？對於你想要最終的佈局做一些更具體的描述 –

擺脫彩車
添加顯示：inline-block的
添加利潤率爲您需要

使用此間距css

.buttons .buttonStyling{ 

    display: inline-block; 
    height: 40px; 
    text-align: center; 
    line-height: 40px; 
    width: 35%; 
    margin: 0 50px 50px 0; //or however much space you want 
}

這裏的fiddle上述變化

來源

2012-09-12 20:24:15

試試這個：http://jsfiddle.net/cUWn8/5/

基本上，沒有地毯炸彈一切與float，而僅將它應用到甚至按鈕，將產生定位你描述。要獲得（1和2）和（3和4）之間的垂直空間，請在＃2後面添加margin-top到按鈕。此外，所有按鈕都需要爲display: inline-block。

的關鍵CSS變化是：

.buttons .buttonStyling { display: inline-block; } 
.buttonStyling:nth-of-type(even) { float: right; } 
.buttonStyling:nth-of-type(2) ~ .buttonStyling{ margin-top: 50px; }

加上取消對div1上.buttons .buttonStyling和內嵌現有float財產。您.buttons

來源

2012-09-12 20:33:06 tuff

清理，並設置最大寬度跨度，試試這個：jsFiddle

來源

2012-09-12 20:33:54 PseudoNinja

aligning div中的按鈕

回答

相關問題