元素float:right後右揃えで改行する原因とその解決

880 ワード

今日は一つの問題に出会いました.

.tag.tag_success.tag_x
     %span tag.display_name
     %a(href="javascript:void(0)" style= "float:right;")
                
floatをa元素に追加します.ナイトは列を離れて次の行にジャンプします.
理由:
floatではない要素とfloatの元素が一緒にいるとき、floatでなければfloatの元素は排斥されます.今はa元素はfloat:rightですが、テキストはfloat:noneです.だから問題が発生します.
両者を同じ行に表示させる場合、解決策は2つあります.
1.floatの要素をfloat以外の要素に書く前に表示します.

.tag.tag_success.tag_x
     %a(href="javascript:void(0)" style= "float:right")
     %span tag.display_name
2.テキストもfloatに設定します.

.tag.tag_success.tag_x
     %span(style="float:left;") tag.display_name
     %a(href="javascript:void(0)" style= "float:right;")
この二つの方法はいずれも需要を実現できます.状況に応じて選択します.