CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 4038

How to format the text below using css

My html 

<p class="ten_mat_hang">Tên mặt hàng:<b>Casio</b></p>
<p class="quoc_gia_ban">Nơi bán:<b>Japan</b></p>
<p class="khoi_luong">Khối lượng:<b>1kg</b></p>

returns

Tên mặt hàng:Casio

Nơi bán:Japan

Khối lượng:1kg

It is not align well. I want "Casio", "Japan", "1kg" to align like below (dash chars are just for aligning purpose)

Tên mặt hàng: Casio

Nơi bán:_____Japan

Khối lượng:__1kg

And I can not use table. Is is possible to format like above using css? Thanks

Upvotes: 1

Views: 43

Answers (2)

zer00ne
zer00ne

Reputation: 43895

Make a table by using:

display: table and table-layout: fixed

display: table-cell and display: table-row

Use ex as the unit measurement in this case since you have a concern about text spacing. ex = the width of 'x' So it's about the width of 1 char at your font.

section {
  width: 30ex;
  display: table;
  table-layout: fixed;
}
div {
  width: 20ex;
  display: table-cell;
}
label {
  display: table-cell;
}
article {
  display: table-row;
}
<section>
  <article>
    <div>Tên mặt hàng:</div>
    <label>Casio</label>
  </article>

  <article>
    <div>Nơi bán:</div>
    <label>Japan</label>
  </article>

  <article>
    <div>Khối lượng:</div>
    <label>1kg</label>
  </article>
</section>

Upvotes: 1

enissay
enissay

Reputation: 300

Check this SO answer. Basically you use the display:table from CSS.

Upvotes: 0

Related Questions