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

替换float:left为display:inline-block

更新小提琴

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

Answer 2

我同意 Pablo 并会使用 CSS 样式表而不是 JS Fiddle

您所要做的就是从您的样式中删除 FLOAT 属性并使用 SPAN 代替 DIV 无需其他更改！

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

.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

您应该使用浮动属性。
会是这样的：

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

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

</div>

无论如何，您应该使用 css 文件 appart。
试试看，告诉我它是否成功。