Question

我正在尝试使用dt和dd在同一行创建一个dl，并满足以下附加要求：

dt和dd显示在同一行
所有dt的宽度相同，并且应与最长内容的宽度相同（在此示例中为“location”，但它也应使用不同的内容）
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，另一个使用浮动。没有额外的HTML，只有你的。这两种解决方案都不适合旧浏览器。可以通过将水平间距放在元素内部而不是外部（边距）来摆脱calc()，就像现在一样。

嗯，主要是：抱歉，但宽度是静态的 - dt为20％，dd为80％-1em。为了使其按照您的需要工作，获取所有dt元素的最大宽度，您必须使用JavaScript并计算dt和dd的宽度。或切换到表格布局，这将完全解决整个问题。据我所知。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用$('[data-toggle=collapse]').on('click', function() { $('[data-toggle=collapse]').not(this).removeClass('collapsed'); $(this).toggleClass('collapsed'); });上的float: left和dt上的dd，clear: both上的dt以及两者的百分比宽度（根据您的需要调整值）< / p>

（未经修改的HTML）

＆＃13;

dt {
  margin: 1em 1em 0 0;
  float: left;
  clear: both;
  width: 15%
}
dd {
  margin: 1em 0 0 0;
  float: left;
  width: 80%;
}

＆＃13;

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

＆＃13;

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

2 个答案: