ปรับแก้รวมช่องว่างระหว่างข้อความหรือคำพูดในแบบ html

Question 1

ฉันมีปัญหาคือวิธีปรับแก้รวมช่องว่างระหว่างข้อความหรือคำพูดในแบบ html. ฉันต้องการผลลัพธ์ของฉัน 2"เครื่องหมาย:"ตำแหน่งสามารถปรับเดียวกับสาย

ด้านล่างนี้เป็นของฉันตัวอย่างรหัส:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

ตอนนี้ของฉันผลตำแหน่งไม่สามารถเดียวกันเหมือน:

ฉันต้องการให้ได้ผลลัพธ์ตามที่คาดหวังคืนเดียวกันเหมือนด้านล่างนี้:

ฉันต้องพยายามจะใช้ <p> เพื่อแทนที่ <span> ปรับแก้ตำแหน่งแต่"เครื่องหมาย:"จะหักคอมันนะ หวังว่าจะมีใครสักคนสามารถนำทางฉันอยู่บนรู้ที่จะแก้ปัญหานี้ ขอบคุณ

Question 2

เป็นลำไส้คนเรายาวสำหรับรายการแยกกันอยู่มากกว่ามีหมายความว่าฉันจะพิจารณาฤติกรรมโรคจิต--การแทรมันอยู่เป็นชั่วโมงอีลีเมนต์มากกว่าอันที่จริงในแบบ HTML.

นี่ snippet ทำให้ลำไส้คนเรายาวอยู่ก่อนที่จะตาม td ซึ่ง ensures ที่ colons เป็นอยู่ในแนวเดียว.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Question 3

ฉันมีปัญหาคล้ายกันและคนเดียว"hacky"ทางที่ฉันพบนี้คือ:
"เอาอนข้อความของคุณและเครื่องหมายแยกเลขหลัก(: ในกรณีนี้)ใน wrapper(เหมือน <div>และจัดเรียงพวกเขา

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

ก็,คุณไม่ต้องการ <br> ระหว่างของคุณบนโต๊ะนวนแถว(<tr>พิม

Question 4

นี่ฉันต้องปรับปรุงตัวอย่างของคุณรหัสให้ : ในสอง td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

Question 5

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

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

ถ้าคุณต้องการที่จะไม่เติมมันตอนที่กรอง'ข้อความ'ว่างเปล่าคุณสามารถส่งออกลำไส้คนเรายาวเป็น td::before โดยใช้ CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

Question 6

ถ้ามันเกี่ยวกับนัดเดียวคำพูดตามด้วย :, text-align-last:justify; สามารถทำงาน

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

A Haworth · Answer 1 · 2021-11-24T06:22:45

เป็นลำไส้คนเรายาวสำหรับรายการแยกกันอยู่มากกว่ามีหมายความว่าฉันจะพิจารณาฤติกรรมโรคจิต--การแทรมันอยู่เป็นชั่วโมงอีลีเมนต์มากกว่าอันที่จริงในแบบ HTML.

นี่ snippet ทำให้ลำไส้คนเรายาวอยู่ก่อนที่จะตาม td ซึ่ง ensures ที่ colons เป็นอยู่ในแนวเดียว.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Shahriar · Answer 2 · 2021-11-24T08:05:14

ฉันมีปัญหาคล้ายกันและคนเดียว"hacky"ทางที่ฉันพบนี้คือ:
"เอาอนข้อความของคุณและเครื่องหมายแยกเลขหลัก(: ในกรณีนี้)ใน wrapper(เหมือน <div>และจัดเรียงพวกเขา

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

ก็,คุณไม่ต้องการ <br> ระหว่างของคุณบนโต๊ะนวนแถว(<tr>พิม

Janki Gandhi · Answer 3 · 2021-11-24T05:07:41

นี่ฉันต้องปรับปรุงตัวอย่างของคุณรหัสให้ : ในสอง td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

LSE · Answer 4 · 2021-11-24T04:57:36

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

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

ถ้าคุณต้องการที่จะไม่เติมมันตอนที่กรอง'ข้อความ'ว่างเปล่าคุณสามารถส่งออกลำไส้คนเรายาวเป็น td::before โดยใช้ CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

G-Cyrillus · Answer 5 · 2021-11-24T08:11:27

ถ้ามันเกี่ยวกับนัดเดียวคำพูดตามด้วย :, text-align-last:justify; สามารถทำงาน

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

ปรับแก้รวมช่องว่างระหว่างข้อความหรือคำพูดในแบบ html

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่