오른쪽 정렬 된 버튼 배치 <input type=”button” value=”Click

이 코드를 사용하여 버튼을 오른쪽 정렬합니다. 

<p align="right">
  <input type="button" value="Click Me" />
</p>

스 니펫 확장

그러나 <p>태그가 너무와 동일한 기능을 수행 할 찾고, 일부 공간을 낭비 <span>하거나 <div>.

답변

사용하는 정렬 기술은 환경에 따라 다르지만 기본 기술은 float: right;다음과 같습니다.

<input type="button" value="Click Me" style="float: right;">

플로트를 지우고 싶을 수도 있지만 overflow:hidden부모 컨테이너에서 또는 컨테이너 <div style="clear: both;"></div>하단에서 명시 적으로 수행 할 수 있습니다 .

예를 들면 다음과 같습니다. http://jsfiddle.net/ambiguous/8UvVg/

플로팅 된 요소는 일반적인 문서 흐름에서 제거되어 부모의 경계를 오버플로하고 부모의 키를 엉망으로 만들 수 있습니다 ( clear:bothCSS는이를 처리합니다 overflow:hidden). 플로팅과 클리어가 어떻게 동작하는지보기 위해 추가 한 JSFiddle 예제를 살펴보십시오 ( overflow:hidden처음 으로 떨어 뜨리고 싶을 것입니다 ).

답변

또 다른 가능성은 오른쪽을 향한 절대 위치를 사용하는 것입니다.

<input type="button" value="Click Me" style="position: absolute; right: 0;">

예를 들면 다음과 같습니다. https://jsfiddle.net/a2Ld1xse/

이 솔루션에는 단점이 있지만 매우 유용한 사용 사례가 있습니다.

답변

버튼이 유일한 element경우 block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}
<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

스 니펫 확장

이 경우 다른 elements 온 block:

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}
<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

스 니펫 확장

로 flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}
<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

스 니펫 확장

행운을 빕니다…

답변

이 솔루션은 @ günther-jena가 지적한 것처럼 Bootstrap 3에 의존합니다.

시도하십시오 <a class="btn text-right">Call to Action</a>. 이렇게하면 플로팅 된 요소를 지우는 데 추가 마크 업이나 규칙이 필요하지 않습니다.

답변

flex-box를 사용한 2019 년의 현대적인 접근 방식

와 DIV 태그

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

스 니펫 확장

와 스팬 태그

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

스 니펫 확장

답변

또 다른 가능성은 오른쪽을 향한 절대 위치를 사용하는 것입니다. 이 방법으로 할 수 있습니다 :

style="position: absolute; right: 0;"

답변

항상 그렇게 간단한 것은 아니며 때때로 정렬은 Button 요소 자체가 아닌 컨테이너에 정의되어야합니다!

귀하의 경우 해결책은

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

나는 그의 컨테이너의 전체 너비를 width=100%갖도록 지정 했습니다 <div>.

또한 요소 padding:0와 마찬가지로 공간 전후 공간을 피하기 위해 추가 했습니다 <p>.

<div>FSF / Primefaces 테이블의 바닥 글에 정의되어 있으면 float:right버튼 높이가 바닥 글 높이보다 높아지기 때문에 올바르게 작동하지 않는다고 말할 수 있습니다 !

이 Primefaces 상황 text-align:right에서 컨테이너 에서 사용하는 것이 유일한 해결책입니다 .

이 솔루션을 사용하면 오른쪽에 6 개의 버튼이 정렬되면 컨테이너에이 정렬 만 지정해야합니다 🙂 

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>