Html 创建与CSS等价的选项卡，同一行上的第一个条目

我正在尝试做一些在文字处理中非常经典的事情，但在CSS中显然不太常见。我正在将电影信息放入一个网站，并希望将信息格式化如下：

导演：约翰·史密斯
演员阵容：人物A
人B
人物C
作者：詹姆斯·史密斯

是的，那我该怎么做呢？问题是，我试图将标题（导演、演员等）的格式与常规文本不同。以下是我现在拥有的：

<div>
    <h3>Director: <span style="font-weight:300;">John Carney</span></h3>               <h3>Writer: <span style="font-weight:300;">John Carney</span></h3>
    <h3>Cast: <span style="font-weight:300;">Keira Knightley<br>Mark
    Ruffalo</span></h3>
  </div>  

导演：约翰·卡尼作者：约翰·卡尼
演员：凯拉·奈特利
马克
鲁法洛

---

非常感谢您的帮助，谢谢

对于该html，您可以使用以下css：

h3 {
  font-weight: bold;
}
h3 span {
  font-weight: normal;
}

---

对于该html，您可以使用以下css：

h3 {
  font-weight: bold;
}
h3 span {
  font-weight: normal;
}

---

我想您需要一个定义列表：

，

。这里有一些示例，包括css。

我想您需要一个定义列表：

，

。有一些例子，包括css。

您可以这样做：

<div>
  <h3><span>Director:</span>John Carney</h3>
  <h3><span>Cast:</span>Keira Knightley<br>Mark Ruffalo</h3>
  <h3><span>Writer:</span>James Smith</h3>
</div>

---

您可以这样做：

<div>
  <h3><span>Director:</span>John Carney</h3>
  <h3><span>Cast:</span>Keira Knightley<br>Mark Ruffalo</h3>
  <h3><span>Writer:</span>James Smith</h3>
</div>

---

按照@vch的建议，围绕一个新的目标来做怎么样

演示：

或者，一个

dt

可以有多个定义/描述它的

dd

值，例如：

演示：

主任:
约翰·卡尼
作者：
约翰·卡尼
演员阵容：
凯拉·奈特利
马克·鲁法洛
制作人：
另一个人

按照@vch的建议，将其建立在一个新的基础上怎么样

演示：

或者，一个

dt

可以有多个定义/描述它的

dd

值，例如：

演示：

主任:
约翰·卡尼
作者：
约翰·卡尼
演员阵容：
凯拉·奈特利
马克·鲁法洛
制作人：
另一个人

您拥有的是一个数据数组（矩阵），因此最具逻辑性的标记使用HTML

表

元素。从造型的角度来看，它也是最简单的。至少，您只需将标题单元格的对齐方式设置为左侧（而不是默认的居中），将单元格的垂直对齐方式设置为顶部（而不是默认的中间）：

th{文本对齐：左}
th，td{垂直对齐：顶部}
导演：约翰·史密斯
演员：A
B人
C人
作者：詹姆斯·史密斯

默认情况下，

th

元素以粗体显示。普通字体和粗体字体（

font-weight:normal

和

font-weight:bold

）之间的区别是区分字体重量的唯一可靠方法，因为大多数字体没有其他重量。这意味着对于大多数字体，

font-weight:300

会使用正常重量的字体。

您拥有的是一个数据数组（矩阵），因此最符合逻辑的标记使用HTML

表

元素。从造型的角度来看，它也是最简单的。至少，您只需将标题单元格的对齐方式设置为左侧（而不是默认的居中），将单元格的垂直对齐方式设置为顶部（而不是默认的中间）：

th{文本对齐：左}
th，td{垂直对齐：顶部}
导演：约翰·史密斯
演员：A
B人
C人
作者：詹姆斯·史密斯

---

默认情况下，

th

元素以粗体显示。普通字体和粗体字体（

font-weight:normal

和

font-weight:bold

）之间的区别是区分字体重量的唯一可靠方法，因为大多数字体没有其他重量。这意味着对于大多数字体，

font-weight:300

会使用正常重量的字体。

是的，这样的字体会更干净，谢谢。不过这里最重要的是对齐。是的，这会更简洁，谢谢。这里最重要的是对齐。是的，我已经看过了，但是第一个单词没有出现在“定义”后面，它出现在下面的一行中，我希望第一个单词与“定义”一致，然后所有其他单词都排列在它下面。开箱即用，是的。但请参见@tim的以下代码。如果你看他的JSFIDLE，你会发现他用css使它以你想要的格式出现。是的，看到了！谢谢@Tim Medora和所有其他人！旁注（每90分钟只能发布一次）：我如何使文档具有与相同的样式？您可以按任何方式设置

dt

的样式，例如。或者，如果您已经为

h3

定义了一个样式，您可以将其复制到

dt

选择器。是的，我已经查看了这些样式，但是第一个单词不会出现在“定义”之后，它会出现在下面的行中，我希望第一个单词与“定义”一致，然后所有其他单词都排列在它下面。开箱即用，是的。但请参见@tim的以下代码。如果你看他的JSFIDLE，你会发现他用css使它以你想要的格式出现。是的，看到了！谢谢@Tim Medora和所有其他人！旁注（每90分钟只能发布一次）：我如何使文档具有与相同的样式？您可以按任何方式设置

dt

的样式，例如。或者，如果您已经为

h3

定义了样式，则可以将其复制到

dt

选择器。这不会按照问题中所述格式化内容。文本样式没有区别，描述中没有项目符号。@JukkaK.Korpela-我提供了3种不同的内容格式（包括在另一个答案的评论中显示文本样式的一种：）。使用无序列表当然是可选的（“说明中没有项目符号”），这比

br

分离项目更好。如果不需要无序列表，可以使用第二个演示（多个

dd

）。这不会按照问题中所述格式化内容。文本样式没有区别，描述中没有项目符号。@JukkaK.Korpela-我提供了3种不同的内容格式（包括在另一个答案的评论中显示文本样式的一种：）。使用无序列表是不正确的

dt {
    float: left;
    width: 80px;
    padding: 4px;
}
dd {
    margin-left: 88px;
    padding: 4px;
}

<dl> 
    <dt>Director:</dt>
    <dd>John Carney</dd> 

    <dt>Writer:</dt>
    <dd>John Carney</dd> 

    <!-- note the multiple values for a single dt -->
    <dt>Cast:</dt>
    <dd>Keira Knightley</dd>
    <dd>Mark Ruffalo</dd>

    <dt>Producer:</dt>
    <dd>Another Guy</dd> 
</dl>

<style>
th { text-align: left }
th, td { vertical-align: top }
</style>
<table>
<tr><th>Director: <td>John Smith
<tr><th rowspan=3>Cast:<td>Person A
<tr><td>Person B
<tr><td>Person C
<tr><th>Writer: <td>James Smith 
</table>