同一行上的 html 定义列表，具有可变的 dt 大小

Question

我正在尝试创建一个 dl，其中 dt 和 dd 在同一行，并且具有以下附加要求:

• dt和dd显示在同一行
• 所有 dt 的宽度都相同，并且应该与最长内容的宽度相同(在此示例中为“位置”，但它也应该适用于不同的内容)
• dd 的宽度是剩余的可用空间
• dt 和dd 之间的间距是1em
• dl 和下一个 dd 之间的垂直边距为 1em

到目前为止我的代码:

dt {
    margin: 1em 1em 0 0;
}
dd {
    margin: 0;
}

<dl>
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>

Answer 1

这里有两个部分解决方案，一个使用 flexbox，另一个使用 float 。没有额外的 HTML，只有你的。这两种解决方案均不适用于旧浏览器。可能摆脱 calc()通过将水平间距放在元素内部，而不是像现在这样放在外部(边距)。

好吧，最主要的是:抱歉，宽度是静态的——dt 为 20% , 80%-1em 为 dd .为了让它像你需要的那样工作，取所有 dt 的最大宽度元素，你必须使用 JavaScript 并计算 dt 的宽度和 dd .或者切换到 ye olde 表布局，这实际上可以解决整个问题。据我所知。

dl.using-flex{ display: flex; flex-direction:row; flex-wrap: wrap; }
.using-flex dt { flex-basis:20%; }
.using-flex dd { flex-basis: calc(80% - 1em); }


dl.using-floats{ overflow:hidden; /* for clearfix */}
.using-floats dt{ float:left; width:20%; clear:left;}
.using-floats dd{ float:left; width:calc(80% - 1em); }

dt, dd{ margin:0 0 1em; }
dd{ margin-left:1em; }

<h2>Using flexbox</h2>
<dl class="using-flex">
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>

<h2>Using floats</h2>
<dl class="using-floats">
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>