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

Updated Fiddle

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

Answer 2

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

你所要做的就是从你的STYLES中删除FLOAT特质并且代替DIV使用SPAN 无需其他更改!!

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>

Answer 3

你应该使用float属性会是这样的：

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

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

</div>

无论如何你应该使用css文件appart。
尝试一下，告诉它是否成功。

水平对齐两行div

3 个答案: