Question

我希望使用dl，dt和dd以表格形式显示日期，月份和年份。

我希望这样呈现：

BIRTHDAY

    day month year
    in1 in2   in3

in*是给定类型的输入，无关紧要。

css应该如何实现这一目标？

我目前的代码是：

<dl>
  <dt>day</dt>
  <dd>myInput<dd>

  <dt>month</dt>
  <dd>myInput2</dd>

  <dt>year</dt>
  <dd>myInput3</dd>
</dl>

Answer 1

您需要一个表，而不是定义列表（<dl>标记对）。人们经常忽视使用表格，即使它们完全适合（并且最初制作）这项工作。

HTML：

<div class="birthday">
    <span class="title">Birthday</span>

    <table>
        <th>
            <td>Day</td> <td>Month</td> <td>Year</td>
        </th>

        <tr>
            <td>25</td> <td>1</td> <td>1902</td>
        </tr>
    </table>
</div>

CSS：

.birthday
{
    padding-left: 30px;
}

.birthday .title
{
    display: inline-block;
    font-size: 20px;

    margin-left: -30px;
    margin-bottom: 20px;
}

.birthday table tr td
{
    min-width: 50px;
}

现场演示：http://jsfiddle.net/Blender/5rhLd/

Answer 2

如果您知道如何使用dl, dt and dd。

唯一的问题是如何将六个dd分成两行

在css中，您可以设置dd float，并且六个dd将显示在同一行中。

然后，使用<br />将in1 in2 in3移至第二行

dl dt和dd显示生日CSS

2 个答案: