html - css 对齐问题 <dl> <dd >

Question

当使用

和

时，假设 dd 具有单行定义。在我的例子中，我有多个定义条目，我希望正确显示(观看附加图像后将如何清除)。因此，我使用 这是 css-ed(margin: 0 0 0 21.3%) 来实现下面的风格，但我不满意，因为这给我留下了这些问题:

1. 第一个条目(即 A 先生？)左上方的行。
2. 在不同尺寸的显示器上进行测试会产生偏移对齐。即在较小的显示器上(边距:0 0 0 22.3%)有效!!!
3. 此外，当我放大和缩小时，对齐方式也会发生变化。(放大:向左移动，缩小:向右移动)

实现

通缉

正如我在多个页面上使用

和

设计的那样，在这一行中获得解决方案会很好。

.top-class-name {
margin-left: 25px;
background-color: white;
padding: 0.5ex;
width: 75%;
}


.top-class-name > div {
margin-bottom: 1em;
}

.top-class-name dl {
margin: 0;
}

dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

.top-class-name dt{
display: inline-block;
vertical-align: top;
width: 220px;
}

.top-class-name dd {
display: inline-block;
vertical-align: top;
margin: 0;
width: 73%;
}

dd {
display: block;
-webkit-margin-start: 40px;
}

.top-class-name dd:after {
content: '\A';
white-space: pre;
}

.top-class-name da{
display: block;
vertical-align: middle;
margin: 0 0 0 21.3%;
width: 43%;
}

<div class="top-class-name">
    <div>
        <dl>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Guest Names :</dt>
            <da>Mr. A</da>
            <da>Mr. B</da>
            <da>Mr. Z</da>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
        </dl>
    </div>    
</div>

Answer 1

您有一个选择是将列出的元素隔离到一个容器中(我在示例中使用了 ul)并 float dt。最后，将 overflow:auto 添加到容器中很重要(这会创建一个新的 block formatting context )，它可以防止容器中的各个元素围绕 float 元素流动。

我在您的 CSS 中删除了一些有问题的代码，这些代码可能在这个简单示例的上下文之外很重要；但是，原则是存在的。您似乎描述了 float 元素，添加溢出技巧应该可以完成您需要的功能。

.top-class-name {
margin-left: 25px;
background-color: white;
padding: 0.5ex;
width: 75%;
}


.top-class-name > div {
margin-bottom: 1em;
}

.top-class-name dl {
margin: 0;
}

dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

.top-class-name dt{
display: inline-block;
vertical-align: top;
width: 220px;
}

.top-class-name dd {
vertical-align: top;
margin: 0;
}

dd {
display: block;
-webkit-margin-start: 40px;
}

.top-class-name da{
display: block;
vertical-align: middle;
margin: 0 0 0 21.3%;
width: 43%;
}

dt {
  float:left;
  clear:left;
}

dd ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: auto;
}

<div class="top-class-name">
    <div>
        <dl>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Guest Names :</dt>
            <dd>
                <ul>
                    <li>Mr. A</li>
                    <li>Mr. B</li>
                    <li>Mr. Z</li>
                </ul>
            </dd>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
            <dt>Other Term :</dt>
            <dd>xxxxxxxxxxxxxxxxxxxxxxxxxx</dd>
        </dl>
    </div>    
</div>