CSS - 3 ссылки - Выровнять слева 1, справа Align 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 и использовать text-align: справа, но дополнительный div заставляет кнопки выходить из выравнивания друг с другом.

Answer 1

Вы можете достичь его display:flex - нет необходимости менять разметку

.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 2

Попробуйте это.

.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 3

Используйте Flexbox с justify-content: space-between на обертке, а также поместить margin-left: auto на s кнопка. Это выровнят все оттуда вправо, а все до этого выравнивается по левому краю.

EDIT: Я 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 4

С поплавком, вы должны обернуть свои ссылки в дивы, как это:

.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>