Question

我有一个dl，其中dt可能有多个dd，我想排队。不幸的是，第二个dl线向左移动。如何调整样式以防止这种情况？我无法编辑html，因为我是从应用程序获取的，这只是一个例子，每页有6到10个dt标签，有多个dd所以这必须是一个通用的解决方案。

dl {
    width: 450px;
    overflow: hidden;
    background: #ff0;
}
dt {
    padding: 0 4px 0 4px;
    float: left;
    width: 125px;
    background: #cc0;
    clear: left;
    text-align: right;
}
dd {
    padding: 0 4px 0 4px;
    margin: 0;
    float: left;
    width: 250px;
    background: #dd0;
}

<body>
  <h3>Test McTesterson</h3>
  <dl>
    <dt>Personal Phone</dt> 
    <dd>555-555-5555</dd>
    <dt>Personal Email</dt> 
    <dd>test@test.com</dd>
    <dt>Address</dt> 
    <dd>
      <span>123 Main St</span>
    </dd>
    <dd> 
      <span>Cityburg</span> 
      <span>Qa</span> 
      <span>12345</span>
    </dd>
    <dt>Birthdate</dt> 
    <dd>19801230</dd>
  </dl>
<body>

Answer 1

一种方式：

dd + dd {
    display: block; /* to force new line */
    margin: 0 0 0 4em; /* whatever the width of dt */
}

Answer 2

您也可以不使用多个dd，只需将所有信息放入一个dd。

排列多个dd标签

2 个答案: