水平對齊兩行div

我有幾行按鈕，我想要一個左對齊，另一個右對齊 - 但在一個單獨的行。水平對齊兩行div

如果我使用表，這是我怎麼會做它：

<table> 
<tr> 
<td>Content Left Aligned</td> 
</tr> 
<tr> 
<td align="right">Content Right Aligned</td> 
</tr> 
</table>

但我想在這裏使用CSS和div的。這是我有：（JSFiddle）

<div style='text-align:left;'> 

     <div class="btn1 rounded-corners"> 
      Green 
     </div> 

     <div class="btn1 rounded-corners"> 
      Blue 
     </div> 

     <div class="btn1 rounded-corners"> 
      Purple 
     </div> 
    </div>  
    <div style="clear:all;">&nbsp;</div> 


    <div style='text-align:right;'> 
     <div class="btn2 rounded-corners"> 
      Six 
     </div>     

     <div class="btn2 rounded-corners"> 
      Seven 
     </div>     

     <div class="btn2 rounded-corners"> 
      Eight 
     </div>   
    </div>  
    <div style="clear:all;">&nbsp;</div>

我在做什麼錯這個CSS？（見JSFiddle什麼回事的工作的例子 - 有一些款式那裏，我不想在這裏弄亂）

來源

2013-01-11 a coder

更換float:left與display:inline-block

Updated Fiddle

float用於一個非常特殊的目的。把<div> s放在同一行不是;）

來源

2013-01-11 00:51:11

這看起來很有前途。讓我檢查一下實際的網站。 ;） –

這就是我以後 - 謝謝。 –

刪除我的答案。 :) –

你應該使用float屬性。
會是這樣的：

<div style="float:left;width:400px"> 

</div> 
<div style="margin-left:400px"> 

</div>

反正你應該使用一個CSS文件APPART。
試試吧，並告訴它是否成功。

來源

2013-01-11 00:51:15 Pablo

Float將它們放在同一行。我想要小按鈕左上方的大按鈕。 –

我同意巴勃羅和將使用CSS樣式表，而不是JS小提琴

所有你需要做的就是從您的樣式而在地方的DIV去除FLOAT properrty使用需要跨越沒有其他變化！

enter image description here

複製並粘貼下面的代碼到一個新的文件，看看。

.btn1 
{ 
    font-size:1.2em; 
    padding:5px 20px; 
    margin:0px 5px; 
    border: 1px solid #0E5727; 
    color:red; 
    cursor:pointer; 
} 

.btn2 
{ 
    font-size:.8em; 
    padding:5px 20px; 
    margin:0px 5px; 
    border: 1px solid #0E5727; 
    color:blue; 
    cursor:pointer; 
} 

.rounded-corners 
{ 
    -moz-border-radius: 20px; /* Firefox */ 
    -webkit-border-radius: 20px; /* Safari, Chrome */ 
    border-radius: 20px; /* universal */ 
} 


<div style="text-align:left;"> 
    <span class="btn1 rounded-corners">Green</span> 
    <span class="btn1 rounded-corners">Blue</span> 
    <span class="btn1 rounded-corners">Purple</span> 
</div> 
<div style="width: 100%;">&nbsp;</div> 
<div style="text-align:right;"> 
    <span class="btn2 rounded-corners">Six</span> 
    <span class="btn2 rounded-corners">Seven</span>     
    <span class="btn2 rounded-corners">Eight</span>   
</div> 
<div style="width: 100%;">&nbsp;</div>

來源

2013-01-11 01:37:46 Zeddy

水平對齊兩行div

回答

相關問題