css - 为什么 margin 不应用而没有溢出 :auto

Question

我正在尝试创建一个标签和文本彼此相邻的 View 页面。现在不提 overflow auto 就不会计算利润率。为什么？？

这是我的 CSS 和 HTML。

.dl-horizontal {
    margin-bottom: 20px;
    /*overflow:auto*/
}

.dl-horizontal dt {
    clear: left;
    float: left;
    font-weight: bold;
    line-height: 25px;
    width: 160px;
}

.dl-horizontal dd {
    content: " ";
    display: table;
    line-height: 25px;
}


.action-wrap{
    clear: both;
    margin-top: 20px;
}

<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd></dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>

我个人多次遇到这个问题，我的快速修复是 overflow:auto。想知道是否可以使用它，还是我做错了什么。

Answer 1

更新:我找到了更好的方法，忘了我下面说的吧。只需添加显示:表格；到 .dl-水平选择器。现在每个红色边框(出于视觉目的)都相同。

看来，如果dd标签中没有任何内容，它不会将行向下推。顺便说一下， padding-bottom: 20px 可以，但如果你不想这样做，你可能必须在 dd 字段中放置一个(不间断的空格)。这似乎也有效。 CSS 有很多怪癖:)

.dl-horizontal {
    margin-bottom: 20px;
    display: table;
border-bottom: 1px solid red;
}

.dl-horizontal dt {
    clear: left;
    float: left;
    font-weight: bold;
    line-height: 25px;
    width: 160px;
}

.dl-horizontal dd {
    content: " ";
    display: table;
    line-height: 25px;
}


.action-wrap{
    clear: both;
    margin-top: 20px;
}

<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd></dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>
<dl class="dl-horizontal">
    <dt>Name:</dt>          <dd>My Name</dd>
    <dt>Description:</dt>   <dd>Lorem ipsuem</dd>
    <dt>Group:</dt>         <dd>&nbsp;</dd>
</dl>
<div class="action-wrap ng-scope">
     <button class="button cancel" >Cancel</button>
</div>