버튼을 오른쪽으로 정렬합니다.

버튼을 오른쪽으로 정렬합니다.

이 코드를 사용하여 단추를 오른쪽 정렬합니다.

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

플로팅 요소는 일반적인 문서 흐름에서 제거되어 부모의 경계를 넘치게 하고 부모의 높이를 엉망으로 만들 수 있으며 CSS는 이를 처리합니다.overflow:hidden. 추가한 JSFidle 예제를 사용하여 부동 및 지우기가 어떻게 동작하는지 확인합니다(삭제할 수 있음).overflow:hidden처음에는).

버튼이 유일한 경우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>

행운을 빕니다...

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

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

예를 들어 보겠습니다. https://jsfiddle.net/a2Ld1xse/

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

<div style = "display: flex; justify-content:flex-end">
    <button>Click me!</button>
</div>

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

플렉스 박스를 이용한 2019년의 현대적 접근법

점괘로

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

@gunther-jena가 지적한 바와 같이 이 솔루션은 부트스트랩 3에 의존합니다.

해라<a class="btn text-right">Call to Action</a>이렇게 하면 부동 요소를 지우는 데 추가 마크업이나 규칙이 필요하지 않습니다.

페이지 흐름에서 버튼을 유지하려면:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(이 스타일을 .vmx 파일에 넣으십시오. 더 나은 유지관리를 위해 이 HTML을 인라인으로 사용하지 마십시오.)

항상 그렇게 간단하지는 않으며 정렬은 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단추 높이가 바닥글 높이보다 높아지므로 올바르게 작동하지 않습니다!

이 프라임페이스 상황에서 유일하게 받아들일 수 있는 해결책은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>

또 다른 가능성은 오른쪽 방향의 절대 위치를 사용하는 것입니다.다음과 같은 방법으로 수행할 수 있습니다.

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

나의 경우에는

<p align="right"/>

잘 작동한

float-right 부트스트랩 클래스와 함께:

 <button class="float-right">RIGHT</button>

언급URL : https://stackoverflow.com/questions/6632340/place-a-button-right-aligned