Question

我无法弄清楚使用哪个HTML标签来获取下面的格式。有人可以告诉我使用哪个吗？

Fruit:      $ 10,000
Apples:     $ 4,000
Orange:     $ 6,000

Answer 1

您可以使用任何想要的标签

<p>Fruit:      $10,000</p>
<p>Apples:     $4,000</p>
<p>Orange:     $6,000</p>

<h1>Fruit:      $10,000</h1>
<h1>Apples:     $4,000</h1>
<h1>Orange:     $6,000</h1>

Answer 2

要使美元数字对齐，您可以只使用一个表格：

<table style="width:100%">
  <tr>
    <th>Product</th>
    <th>Price</th> 
  </tr>
  <tr>
    <td>Fruit:</td>
    <td>$10,000</td> 
  </tr>
  <tr>
    <td>Apples:</td>
    <td>$4,000</td> 
  </tr>
  <tr>
    <td>Oranges:</td>
    <td>$6,000</td>
  </tr>
</table>

或者您制作div元素：

div {
  display: inline-block;
}

<div style="width: 50%">Fruit:</div>$10,000
<div style="width: 50%">Apples:</div>$4,000
<div style="width: 50%">Oranges:</div>$6,000

我肯定会使用第一个版本，因为可以在需要编码的时候更轻松地更改样式，并且更易于维护（您可以轻松地添加行，表结构，宽度，列数等）。如果要更改设计，列数等，第二个示例是新的。
不过，两种选择都很好，希望我能为您提供帮助。

哪个HTML标签用于此输出

2 个答案: