2

ページの右隅に表示したいスパン要素があります。そのために私は使用しmargin-right:10pxました。しかし、それは効果を示しません。どこでmargin-left動作します。どうしてこれなの？また、span 要素をページの右側に表示するにはどうすればよいでしょうか?

4

4 に答える 4

5

これを試してください（jsFiddle）

.right-corner {
    float:right;
}

またはこれ（jsFiddle）

.right-corner {
    position:absolute:
    top:0;
    right:0;
}

margin-right が機能しない理由は、要素を再配置するのではなく、要素に右マージンを与えるだけだからです。理解を助けるために、要素の後に何かを置くとmargin-right、それらの間にマージンであるギャップができます。

margin-leftこれも同様に、左側で行っているだけで、要素が左から右に配置されているため、左側にギャップがあり、右にシフトしたように見えます。

この小さな例を見て、理解を試みてください。理解できない場合は、 CSS ボックス モデルをよく読んでください。

CSS ボックスモデル (www.w3.org/TR/CSS2/box.html より)

于 2013-03-10T05:58:13.747 に答える
1

@Tyriarの回答を完成させるために、の使用法を示すフィドルもありますtext-align: right。そして、なぜマージンは存在できるが、観察可能な効果がないのか。またclear、フローティング要素の後にプロパティを使用する方法、および/またはフローティング要素のコンテナのクリアフィックス（両方ともここでは必要ありません）

http://jsfiddle.net/rLQbk/

もう1つのアドバイス：何をどのように達成したいかが本当に（本当に）確信が持てない場合は、絶対測位を使用しないでください。ほとんどの場合、CSSの問題に対する最善の解決策ではありません。完全にフローから外れると、そのコンテンツは他のコンテンツの上に気にせずに表示されます...

于 2013-03-10T06:48:17.297 に答える
1

あなたが探しているのは float:right; だと思います。

于 2013-03-10T05:58:00.273 に答える
1

Margin-right は右マージンです。

右に揃えたい場合は、 right:10px を使用できます。これは、位置が絶対的な場合です。

それ以外の場合は float:right を使用できます

display:inline-block をスパンに設定することもできます。

マージンについて詳しくは、 http: //phrogz.net/css/htmlvsbody.html http://www.htmldog.com/guides/cssbeginner/margins/をご覧ください。

于 2013-03-10T05:58:21.743 に答える