1

2 行のボタンがあり、1 つを左揃えに、もう 1 つを右揃えにしたいのですが、別の行に配置します。

テーブルを使用していた場合、これは私が行う方法です:

<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を参照してください。ここで散らかしたくないスタイルがいくつかあります)

4

3 に答える 3

2

float:leftと置き換えますdisplay:inline-block

更新されたフィドル

float非常に特定の目的で使用されます。s を同じ行に配置する<div>のはそうではありません;)

于 2013-01-11T00:51:11.737 に答える
1

私はパブロに同意し、JS Fiddle ではなく CSS スタイルシートを使用します

STYLES から FLOAT プロパティを削除し、DIV の代わりに SPAN を使用するだけです。その他の変更は必要ありません。

ここに画像の説明を入力

以下のコードをコピーして NEW ドキュメントに貼り付けて確認してください。

.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-11T01:37:46.037 に答える
0

float プロパティを使用する必要があります。
次のようになります。

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

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

</div>

とにかく、css ファイル appart を使用する必要があります。
試してみて、うまくいったかどうか教えてください。

于 2013-01-11T00:51:15.610 に答える