Html'deki metin veya sözcükler arasındaki boşlukları ayarlama

Question 1

Html'deki metin veya kelimeler arasındaki boşlukları nasıl ayarlayacağımla ilgili bir sorunum var. Sonucumun 2 "iki nokta üst üste" hizalamasının aynı çizgiyi ayarlayabilmesini istiyorum.

Aşağıda örnek kodum var:

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

Şimdi sonuç hizalamam aynı olamaz:

Beklenen sonucun aşağıdaki gibi olmasını istiyorum:

Kullanmaya çalışıyorum <p> değişmek <span> hizalamayı ayarlayın, ancak "Kolon" parçalanacaktır. Umarım birisi bu sorunun nasıl çözüleceği konusunda bana rehberlik edebilir. Teşekkürler.

Question 2

İki nokta üst üste herhangi bir anlam ifade etmek yerine görsel ayırma için olduğundan, onu HTML'DEN ziyade sahte bir öğeye eklemeyi düşünürdüm.

Bu snippet, kalın bağırsağın hizalanmasını sağlayan aşağıdaki td'den hemen önce kalın bağırsağı yerleştirir.

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

Benzer bir sorunum vardı ve bulduğum tek "hacky" yol bu:
"Metninizi ve ayırıcınızı koyun (: bu durumda) bir sarıcıda (örneğin <div>) ve onları hizalayın.

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

Ayrıca, ihtiyacınız yok <br> tablo satırlarınız arasında (<tr>s).

Question 4

Burada örnek kodunuzu güncelledim : ikinci 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

Bunu başarmanın en kolay yolu, kolonun başlangıcına koymaktır. 'başlığın' sonu yerine 'metin'.

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

'Metin' boş olduğunda atlamanız gerekiyorsa, iki nokta üst üste olarak çıktı alabilirsiniz. td::before CSS kullanma.

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

Tek bir kelimeyle ilgiliyse, ardından :, text-align-last:justify; olabilir işi

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

İki nokta üst üste herhangi bir anlam ifade etmek yerine görsel ayırma için olduğundan, onu HTML'DEN ziyade sahte bir öğeye eklemeyi düşünürdüm.

Bu snippet, kalın bağırsağın hizalanmasını sağlayan aşağıdaki td'den hemen önce kalın bağırsağı yerleştirir.

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

Benzer bir sorunum vardı ve bulduğum tek "hacky" yol bu:
"Metninizi ve ayırıcınızı koyun (: bu durumda) bir sarıcıda (örneğin <div>) ve onları hizalayın.

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

Ayrıca, ihtiyacınız yok <br> tablo satırlarınız arasında (<tr>s).

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

Burada örnek kodunuzu güncelledim : ikinci 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

Bunu başarmanın en kolay yolu, kolonun başlangıcına koymaktır. 'başlığın' sonu yerine 'metin'.

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

'Metin' boş olduğunda atlamanız gerekiyorsa, iki nokta üst üste olarak çıktı alabilirsiniz. td::before CSS kullanma.

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

Tek bir kelimeyle ilgiliyse, ardından :, text-align-last:justify; olabilir işi

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'deki metin veya sözcükler arasındaki boşlukları ayarlama

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride