ฉันใช้รหัสนี้เพื่อจัดตำแหน่งปุ่มขวา

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

โชคดี...

วิธีการแก้ปัญหานี้ขึ้นอยู่กับ Bootstrap 3 ตามที่ระบุโดย @ günther-jena

ลอง<a class="btn text-right">Call to Action</a>ดู วิธีนี้คุณไม่จำเป็นต้องมีมาร์กอัปหรือกฎเพิ่มเติมเพื่อกำจัดองค์ประกอบที่ลอยอยู่

วิธีการที่ทันสมัยในปี 2562 โดยใช้เฟล็กซ์บ็อกซ์

ด้วยแท็กdiv

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

ด้วยแท็กspan

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

ความเป็นไปได้อีกอย่างหนึ่งคือการใช้การจัดตำแหน่งแบบสัมบูรณ์ซึ่งวางด้านขวา คุณสามารถทำได้ด้วยวิธีนี้:

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

มันไม่ง่ายเสมอไปและบางครั้งการจัดตำแหน่งจะต้องกำหนดไว้ในคอนเทนเนอร์และไม่ได้อยู่ในองค์ประกอบของปุ่ม!

สำหรับกรณีของคุณการแก้ปัญหาจะเป็น

<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 ปุ่มที่จะจัดชิดขวาคุณต้องระบุการจัดตำแหน่งนี้ใน container :-) เท่านั้น

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

ในการคงปุ่มไว้ในโฟลว์หน้า:

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

(ใส่สไตล์นั้นในไฟล์. css อย่าใช้ html แบบอินไลน์นี้เพื่อการบำรุงรักษาที่ดีขึ้น)

นี่จะแก้มัน

<input type="button" value="Text Here..." style="float: right;">

ขอให้โชคดีกับรหัสของคุณ!

ในกรณีของฉัน

<p align="right"/>

ทำงานได้ดี

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