フォーマットlink要素

Question

私はそれが絵にあるように右の要素をスタイルする必要がありますが、私は「プル権利」をクラスを使用する場合、それはまた、底部要素の幅に影響を与えます。

<a class="pull-right">My link</a> 
<div class="input-group margin-top-md"> 
    <!--->It is bottom element <---> 
</div> 

Answer 1

あなたが前の要素のpositionを設定するのを忘れている場合、これはfloat: rightの正常な動作です。左上のコンテナの位置をposition: absoluteに変更すると、リンクは上に移動しますが、右に移動していることがわかります。

CSSフレックスを使用してこれをスタイリングすることをおすすめします。

.pull-right { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.test { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.test1 { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 

 
.test2 { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: green; 
 
} 
 

 
.input-group { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: yellow; 
 
}

<div class="test"> 
 

 
    <div class="test1"> 
 

 
    </div> 
 

 
    <div class="test2"> 
 
    <a class="pull-right">My link</a> 
 
    </div> 
 

 
</div> 
 

 
<div class="input-group margin-top-md"> 
 

 
</div>