css对齐问题<dl> <dd> </dd> </dl>

Question

使用＆lt; dt＆gt; 和＆lt; dd＆gt; 时，假定dd具有单行定义。在我的情况下，我有多个用于定义的条目，我想要正确显示（在观看附加图像后将如何清除）。因此，我正在使用＆lt; da＆gt;这是css-ed（保证金：0 0 0 21.3％）到达到以下的风格，但我不满意，因为这让我有这些问题：

1. 在第一个条目上方留下的一行（即A先生？）。
2. 在不同尺寸的显示器上进行测试会产生偏移对齐即在较小的显示器上（保证金：0 0 0 22.3％）工作!!!
3. 当我放大和缩小对齐移位时。（放大：向左移动，缩小：向右移动）

已实现



通缉



正如我设计的那样使用＆lt; dt＆gt;和＆lt; dd＆gt;在几个页面上，最好在这一行中获得解决方案。

.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）并浮动dt。最后，将overflow:auto添加到容器（这会创建一个新的block formatting context）非常重要，这可以防止容器中的各个项目在浮动元素周围流动。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;