Question

我有一个列表，其中第一个单词是大胆的，但当然CSS不会让我为粗体标签添加固定宽度。有没有解决方法，所以我可以让苹果，绿色和大块左对齐？我没有其他HTML选项。

我有：

•水果：苹果
•颜色：绿色
•尺寸：大

<script>
ul b {width:200px}  //wont't work
</script>

<ul>
<li><b>Fruit:</b> Apples
<li><b>Colour:</b> Green
<li><b>Size:</b> Big
</ul>

Answer 1

<b>标记拒绝应用宽度的原因是<b>标记默认为display:inline。

制作元素display:inline-block将使宽度生效。

ul b {
  width: 200px;
  display: inline-block;
}

<ul>
  <li><b>Fruit:</b> Apples</li>
  <li><b>Colour:</b> Green</li>
  <li><b>Size:</b> Big</li>
</ul>

也就是说，这是表格数据，因此table在语义上比无序列表更正确。

td:first-child {
  font-weight: bold;
}

<table>
  <tr>
    <td>Fruit:</td>
    <td>Apples</td>
  </tr>
  <tr>
    <td>Colour:</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Size:</td>
    <td>Big</td>
  </tr>
</table>

或者，您可以使用CSS表格获得相同的效果，只需将备用文本包装在<span>中。

ul {
  display: table;
  list-style-type: none;
}
li {
  display: table-row;
}
li * {
  display: table-cell;
}

<ul>
  <li><b>Fruit:</b>  <span>Apples</span>
  </li>
  <li><b>Colour:</b>  <span>Green</span>
  </li>
  <li><b>Size:</b>  <span>Big</span>
  </li>
</ul>

将宽度添加到<b>标签？

1 个答案: