버튼을 오른쪽으로 정렬하는 방법은 무엇입니까?

Question

안녕하세요, 저는이 주제가 여러 번 요청되었으며 포럼 검색을 통해 여러 가지 해결책을 찾았습니다. 등과 같은

그러나 솔루션 <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

아래의 코드는 바로이

button 사이 footer

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

를 추가하려면 button

에 스타일 float:right를 추가 참조 clearfix

.clearfix{ 
clear: both; 
} 

에 대한3210

및 CSS는 더 약 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를 사용하고 그냥 display:flex;flex-direction:row;와 컨테이너 내부 둘 다 포장 relative

Answer 3

에 position 속성을 설정 한 후 버튼에 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>