Question

我正在尝试做一些在文字处理方面非常经典的东西，但在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>

感谢任何帮助，谢谢!!

Answer 1

我想你想要一个定义列表：<dl>, <dt>, <dd>。有一些例子，包括css here。

Answer 2

你可以这样做：

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

然后在你的样式表中：

h3 {
  font-weight: normal;
  padding-left: 200px;
}

h3 span {
  display: inline-block;
  min-width: 200px;
  height: 100%;
  font-weight: bold;
  margin-left: -200px;
}

Answer 3

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

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

Answer 4

如同@vch建议的description list一样？

演示：http://jsfiddle.net/dt2v7zys/2/

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

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

    <dt>Cast:</dt>
    <dd>
        <ul>
            <li>Keira Knightley</li>
            <li>Mark Ruffalo</li>
        </ul>
    </dd>
</dl>

使用...

进行样式化

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

或者，dt可能有多个dd值来定义/描述它，例如：

演示：http://jsfiddle.net/dt2v7zys/1/

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

Answer 5

您拥有的是数据的数组（矩阵），因此最符合逻辑的标记使用HTML table元素。从造型的角度来看，它也是最简单的。您最不需要将标题单元格的对齐方式设置为左侧（而不是默认居中位置），并将单元格的垂直对齐方式设置为顶部（而不是默认的中间位置）：

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

默认情况下，th元素以粗体显示。普通和粗体（font-weight: normal和font-weight: bold）之间的区别是使字体重量产生差异的唯一可靠方法，因为大多数字体没有其他权重。这意味着对于大多数字体，font-weight: 300会导致使用正常的重量字体。

创建与CSS等效的选项卡，第一个条目在同一行

5 个答案: