水平对齐两行div

Question

我有几行按钮，我希望其中一个左对齐，另一个右对齐--但要在单独的行上。

如果我使用表格，我会这样做：

<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以了解正在进行的工作示例-这里有一些我不想在这里弄乱的样式)

Answer 1

用display:inline-block替换float:left

Updated Fiddle

float用于一个非常特殊的目的。将<div>s放在同一行不是这样的;)

Answer 2

我同意Pablo的观点，我会使用CSS样式表，而不是JS

您所要做的就是从您的样式中删除浮动属性，并在DIVs的位置使用SPANs，不需要其他更改！

​

​

将下面的代码复制并粘贴到一个新文档中，然后查看。

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

Answer 3

应该使用float属性。

应该是这样的：

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

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

</div>

无论如何，你应该使用一个css文件appart。

试试看，如果成功了，告诉我。