Question

我正在尝试创建一个视图页面，其中标签和文本彼此相邻。现在没有提到溢出自动，保证金不会被计算在内。为什么？

这是我的css＆amp; HTML

＆＃13;

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

＆＃13;

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

＆＃13;

我个人经常多次面对这个问题而且我的快速解决方法是溢出：auto。想知道它是否可以使用它或者我做错了什么。

Answer 1

更新：我找到了更好的方法，忘了我下面说的话。只需添加display：table;到.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>

Answer 2

这主要是由于保证金崩溃。

两个或多个方框的相邻边距（没有非空内容，填充或边框区域或间隙区分）组合形成一个边距。

通过向css添加float属性或overflow：auto来防止边缘崩溃的方法之一。

检查这个小提琴：http://jsfiddle.net/1pw4zwhf/1/

代码：

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

为什么保证金不适用而没有溢出：auto

2 个答案: