Как выровнять кнопку вправо?

Question

Good Afternoon, Я понимаю, что эта тема была задана несколько раз и имеет несколько решений, как я видел, от поиска на ваших форумах.

Но такие решения, как, <input type="button" value="Click Me" **style="float: right;"**>,

Даже если бы успешно выравнивать кнопки вправо, они перекрывают друг друга мой колонтитула как кнопка должна быть прямо над сноске. Это мой код:

.button { 
 
    border-radius: 4px; 
 
    background-color: #0FA0FF; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 15px; 
 
    padding: 10px; 
 
    width: 200px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
} 
 
.button span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.button span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.button:hover span { 
 
    padding-right: 25px; 
 
} 
 
.button:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 
.containers-fluid { 
 
    padding: 20px 50px; 
 
    background-color: #000000; 
 
    color: white; 
 
}

<button class="button"><span>Proceed to Next Lesson </span> 
 
</button> 
 

 
<footer class="containers-fluid text-center"> 
 
</footer>

Answer 1

Просто добавьте стиль float:right к вашему button

добавить между button и footer

<div class="clearfix"></div> 

и CSS для clearfix

.clearfix{ 
clear: both; 
} 

Подробнее о clearfix

.button { 
 
    border-radius: 4px; 
 
    background-color: #0FA0FF; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 15px; 
 
    padding: 10px; 
 
    width: 200px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    float: right; 
 
    display: block; 
 
} 
 
.button span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.button span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.button:hover span { 
 
    padding-right: 25px; 
 
} 
 
.button:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 
.containers-fluid { 
 
    padding: 20px 50px; 
 
    background-color: #000000; 
 
    color: white; 
 
} 
 
.clearfix{ 
 
clear: both; 
 
}

<button class="button"><span>Proceed to Next Lesson </span> 
 
</button> 
 
<div class="clearfix"></div> 
 
<footer class="containers-fluid text-center"> 
 
</footer>

Answer 2

Вы можете использовать float:right и установить атрибут position в relative

Answer 3

Просто оберните их как внутри контейнера с display:flex;flex-direction:row;, а затем применить margin-right:0; к кнопке.

Смотрите ниже код

.container{ 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
.button { 
 
    border-radius: 4px; 
 
    background-color: #0FA0FF; 
 
    border: none; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-size: 15px; 
 
    padding: 10px; 
 
    width: 200px; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
    margin: 5px 0 5px auto; 
 
} 
 
.button span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 
.button span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 
.button:hover span { 
 
    padding-right: 25px; 
 
} 
 
.button:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 
.containers-fluid { 
 
    padding: 20px 50px; 
 
    background-color: #000000; 
 
    color: white; 
 
}

<div class="container"> 
 
<button class="button"><span>Proceed to Next Lesson </span> 
 
</button> 
 

 
<footer class="containers-fluid text-center"> 
 
</footer> 
 
</div>