6

margin-leftを設定して要素を右揃えにできますか

margin: 0 0 0 auto;

浮かない

float: right;

？

これが正しいかどうかはわかりませんが、ChromeとSafariの両方で機能します。

========

AKの答えは私が必要なものです。

また、これはPraveen Kumar経由でも役立ちます。できますが、サポートは制限されています。ChromeとSafariでのみ動作します。Firefoxでもそうだと思います。Chromeブラウザのみをターゲットにする場合は、可能です。すべての-webkitベースのブラウザはこれをサポートしていますが、他のブラウザはサポートしていません。選択はあなた次第です。:)

4

3 に答える 3

16

はい、設定することで要素を右揃えにすることができますmargin-left:auto

marginただし、以下のとのfloat結果の違いを参照してください。

マージン

margin CSSプロパティは、4辺すべてのマージンを設定します。他のマージンプロパティ（margin-top、margin-right、margin-bottom、margin-left）で各サイドを個別に設定することを避けるための省略形です。

フロート：

float CSSプロパティは、要素を通常のフローから取得し、そのコンテナの左側または右側に沿って配置する必要があることを指定します。ここで、テキスト要素とインライン要素がその周りをラップします。

結果を見る

于 2012-09-03T05:46:10.750 に答える
4

解決策1：ポジショニングを使用する

フローティングではない場合は、ポジショニングを使用して作成できます。親要素をas position: relative;、要素をposition: absolute;with left: auto;、その他を。とし0ます。

CSS

.parent {position: relative;}
.parent .child {position: absolute; left: auto; right: 0; width: 150px; height: 50px;}​​​

HTML

<div class="parent">
    <div class="child">
        Content
    </div>
</div>​

フィドル： http： //jsfiddle.net/U3JXk/
フィドル： http： //jsfiddle.net/U3JXk/1/（ボーダー付き）

解決策2：表示属性をリセットする

ポジショニングを使用したくない場合はdisplay、要素の属性を変更して、として表示およびinline使用することができます。text-alignright

CSS

.parent {text-align: right;}
.parent .child {display: inline;}
/* OR */
.parent .child {display: inline-block; *display: inline; *zoom: 1;}

HTML

<div class="parent">
    <div class="child">
        Content
    </div>
</div>

フィドル ： http： //jsfiddle.net/U3JXk/2/
フィドル： http： //jsfiddle.net/U3JXk/3/（ボーダー付き）

于 2012-09-03T05:41:01.987 に答える
0

マージンはコンテンツのフロー内でコンテンツをそのまま維持しますが、フロートはコンテンツを階層化するため、コンテンツがその下に続く可能性があります。この位置相対/絶対レイヤーの上には、要素をフローティングするよりも少し上にレイヤーがあります。つまり、コンテンツフローからタグを取り出し、z-indexと位置LTRB値（デフォルト：左上）に従って調整します。マージンで配置を調整すると、実際にはコンテンツフローに影響するため、ブラウザによって反応が異なりますが、親要素のフロートオプションを維持することは、要件によって異なります。

于 2012-09-03T06:29:16.050 に答える