水平对齐两行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

回答

相关问题