Question

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

返回

Tênmặthàng：卡西欧

Nơibán：日本

Khốilượng： 1kg

它没有很好地对齐。我希望“卡西欧”，“日本”，“1千克”如下所示对齐（短划线只是为了调整目的）

Tênmặthàng：Casio

Nơibán：_____日本

Khốilượng：__ 1kg

我不能用桌子。是否可以使用css格式如上？感谢

Answer 1

使用以下方式制作表格：

display: table和table-layout: fixed

display: table-cell和display: table-row

在这种情况下，使用ex作为单位测量，因为您对文本间距有所顾虑。 ex =＆＃39; x＆＃39;的宽度所以它是关于你字体的1个字符的宽度。

＆＃13;

section {
  width: 30ex;
  display: table;
  table-layout: fixed;
}
div {
  width: 20ex;
  display: table-cell;
}
label {
  display: table-cell;
}
article {
  display: table-row;
}

＆＃13;

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

＆＃13;

Answer 2

检查SO answer。基本上你使用CSS的display:table。

如何使用css格式化下面的文本

2 个答案: