CSS左揃え1、右揃え2

Question

は、私は三つのボタン

<div class='button-wrap> 
<a class='button'>First Button</a> 
<a class='button'>Second Button</a> 
<a class='button'>Third Button</a> 
</div> 

があると最初の位置を合わせ、左、右の第二の二の位置合わせするための最良の方法は何ですか？好ましくはフロートを使用せずに。

私は別々のdivで2番目の2つを折り返して、text-align：rightを使用してみましたが、余分なdivを指定すると、ボタンの位置がずれてしまいます。

Answer 1

あなたはdisplay:flexでそれを達成することができますの上にecondボタン。これにより、そこからすべてのものが右揃えされ、前のすべてが左揃えになります。

編集：私は、以前のコードをsimplyfied - ...少ないが、より効率的であるフロートで

.wrap { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
button:nth-child(2) { 
 
    margin-left: auto; 
 
}

<div class="wrap"> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
    <button>Button 3</button> 
 
</div>

Answer 2

ラッパーにjustify-content: space-betweenであなたのマークアップ

.button-wrap { 
 
    display: flex; 
 
} 
 
.button:nth-child(2) { 
 
    /* margin left the second button */ 
 
    margin-left: auto; 
 
}

<div class="button-wrap"> 
 
    <a class="button">First Button</a> 
 
    <a class="button">Second Button</a> 
 
    <a class="button">Third Button</a> 
 
</div>

Answer 3

使用フレキシボックスを変更する必要はありません、プラスmargin-left: autoを置く -

.buttons { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.buttons .button:first-child { 
 
    flex-grow: 1; 
 
}

<div class="buttons"> 
 
    <div class="button"> 
 
    <button>First button</button> 
 
    </div> 
 
    <div class="button"> 
 
    <button>Second button</button> 
 
    </div> 
 
    <div class="button"> 
 
    <button>Third button</button> 
 
    </div> 
 
</div>

Answer 4

を、あなたはこのようなdiv要素にあなたのリンクをラップする必要があります。

.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
}

<div class='button-wrap'> 
 
    <div class="left"> 
 
    <a class='button'>First Button</a> 
 
    </div> 
 
<div class="right"> 
 
    <a class='button'>Second Button</a> 
 
    <a class='button'>Third Button</a> 
 
</div> 
 
</div>