Question

我在前端显示的单独行上有2个div标签。我想在同一行显示它们。请注意，第一个是标题，第二个是答案。这是一个例子：

    <div class="field-label">Type of Institution</div>
    <div class="field-value">Fine Arts Magnet School</div>

当前前端显示：

机构类型

美术磁铁学校

这就是我想要的： 机构类型： 美术磁铁学校

标题和文字在同一行。如果文本很长，我希望它包含在标题下。

Answer 1

<div>不适合使用。真的应该是

<dl> <dt>Type of Institution</dt> <dd>Fine Arts Magnet School</dd> </dl>

机构类型: 美术磁铁学校

然后按照此处的说明Definition list with inline pairs

dt, dd { float: left } dt { clear:both }

或提供的其他解决方案之一（关于此问题，有很多重复的问题）。

Answer 2

您可以使用display: inline或float: left（以及之后的clear）。

这是CSS的观点。第二件事是语义，对于pair label-value你应该使用定义列表，所以：

<style>
dl {overflow: hidden}
dt, dd {float: left;}
dt {width: 150px; clear: left; font-weight: bold;}
</style>

<dl>
    <dt>Type of Institution</dt>
    <dd>Fine Arts Magnet School</dd>

    <dt>Students</dt>
    <dd>3000</dd>
</dl>

http://jsfiddle.net/jh0j3yg1/

希望在同一行显示2个div标签

2 个答案: