จัดชิดขวาในเซลล์ตารางด้วย CSS

128

ฉันมีรหัสคลาสสิกเก่าแบบนี้

<td align="right">

ซึ่งทำในสิ่งที่พูด: มันจัดแนวเนื้อหาในเซลล์ให้ถูกต้อง ดังนั้นถ้าฉันใส่ 2 ปุ่มในเซลล์นี้ปุ่มเหล่านี้จะปรากฏที่ตำแหน่งด้านขวาของเซลล์

แต่แล้วฉันก็ปรับโครงสร้างนี้ใหม่เป็น CSS แต่ไม่มีสิ่งที่เรียกว่าการจัดแนวขวา? ฉันเห็นการจัดข้อความเหมือนกันหรือไม่

css

— มิเชล
แหล่งที่มา

155

ใช้

text-align: right

คุณสมบัติ CSS จัดแนวข้อความจะอธิบายถึงวิธีการจัดแนวเนื้อหาแบบอินไลน์เช่นข้อความในองค์ประกอบบล็อกหลัก text-align ไม่ได้ควบคุมการจัดแนวขององค์ประกอบบล็อกเอง แต่เป็นเนื้อหาแบบอินไลน์เท่านั้น

ดู

text-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— ราหุล
แหล่งที่มา

5

เป็น <input type = "button"> องค์ประกอบบล็อกเนื่องจากองค์ประกอบนั้นไม่ได้รับการจัดแนวให้ถูกต้อง?

— Michel

1

มันขึ้นอยู่กับ. ฉันมีย่อหน้าซึ่งเป็นบล็อกอยู่ภายในเซลล์ตาราง (css display: table-cell) และถ้าฉันให้ความกว้าง 100% ของย่อหน้านั้นมันจะเริ่มตามการจัดข้อความชิดขวา ฉันถือว่าการกำหนดความกว้างไม่ใช่สิ่งที่ดีที่สุดเสมอไป

— Costa

3

ฉันเข้าใจแล้วว่าคุณสมบัติtext-alignนั้นไม่ได้รับการตั้งชื่อที่ดีนักหากใช้กับปุ่มและตัวควบคุมรวมถึงข้อความ บางทีสิ่งนี้ควรถูกเรียกว่าcontent-align?

— เบ็น

3

มิเชล: ตั้งค่าองค์ประกอบบล็อกเป็นอินไลน์บล็อกเช่น: td input {display: inline-block; }

— shalamos

1

หรือฉันทำงานแบบลอยเท่านั้น: right or good old align = "right" wtf?

— Tone Škoda

7

สิ่งที่ได้ผลสำหรับฉันตอนนี้คือ:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

ดูซอดังต่อไปนี้:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
แหล่งที่มา

7

อย่าลืมเกี่ยวกับตัวเลือก 'n-child' ของ CSS3 หากคุณทราบดัชนีของคอลัมน์ที่คุณต้องการจัดแนวข้อความไปทางขวาคุณสามารถระบุได้

table tr td:nth-child(2) {
    text-align: right;
}

ในกรณีที่มีโต๊ะขนาดใหญ่จะช่วยให้คุณประหยัดค่าใช้จ่ายเพิ่มเติมได้มาก!

นี่คือซอสำหรับคุณ .... https://jsfiddle.net/w16c2nad/

— ไม่พบ Suite 404
แหล่งที่มา

เยี่ยมมาก: วิธีแก้ปัญหาที่ง่ายและสะอาดที่สุดที่ฉันเห็น

— ncrypticus

2

วิธีวางตำแหน่งองค์ประกอบบล็อกใน`td`เซลล์

คำตอบที่ให้ไว้ช่วยให้จัดข้อความชิดขวาในtdเซลล์ได้อย่างดีเยี่ยม

นี่อาจไม่ใช่วิธีแก้ปัญหาเมื่อคุณต้องการจัดแนวองค์ประกอบบล็อกตามที่แสดงความคิดเห็นในคำตอบที่ยอมรับ เพื่อให้บรรลุสิ่งนี้ด้วยองค์ประกอบบล็อกฉันพบว่ามีประโยชน์ในการใช้ประโยชน์จากระยะขอบ

ไวยากรณ์ทั่วไป

selector {
  margin: top right bottom left;
}

จัดให้ถูกต้อง

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

ปรับศูนย์

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

จัดศูนย์

td {
  margin: auto;
}

ตัวอย่าง JS Fiddle

หรือคุณสามารถทำให้tdเนื้อหาของคุณแสดงได้inline-blockหากเป็นตัวเลือก แต่อาจทำให้ตำแหน่งขององค์ประกอบย่อยผิดเพี้ยนไป

— จอห์นมูตูมา
แหล่งที่มา