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

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

• dt和dd显示在同一行上
• 所有dt的宽度相同，且应与最长内容的宽度相同（在本例中为“位置”，但也应与不同内容一起使用）
• dd的宽度是剩余的可用空间
• dt和dd之间的间距为1米
• dl和下一dd之间的垂直边距为1em

到目前为止，我的代码是：

dt{
利润率：1米1米0；
}
dd{
保证金：0；
}

日期：
2017年1月6日星期三
地点：
巴黎阿纳托尔大道5号马尔斯广场
信息：
埃菲尔铁塔（法语：Tour Eiffel，发音：[tuʁ‿fɛl]关于这个声音听一下）是法国巴黎马尔斯广场上的一座锻铁格子塔。它是以工程师古斯塔夫·埃菲尔的名字命名的，他的公司设计并建造了这座塔。

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

calc（）

嗯，最重要的是：对不起，但是宽度是静态的，

dt

为20%，dd为80%-1em。为了让它像您所需要的那样工作，使用所有

dt

元素的最大宽度，您必须使用JavaScript并计算

dt

和

dd

的宽度。或者切换到旧的表格布局，这将真正解决整个问题。据我所知

dl.使用flex{display:flex；flex-direction:row；flex-wrap:wrap；}
.使用flex dt{flex基：20%；}
.使用flex-dd{flex-basis:calc（80%-1em）；}
dl.使用float{overflow:hidden；/*for clearfix*/}
.使用浮点dt{float:left；width:20%；clear:left；}
.使用浮点数dd{float:left；width:calc（80%-1em）；}
dt，dd{边距：0 0 1em；}
dd{左边距：1em；}

使用flexbox
日期：
2017年1月6日星期三
地点：
巴黎阿纳托尔大道5号马尔斯广场
信息：
埃菲尔铁塔（法语：Tour Eiffel，发音：[tuʁ‿fɛl]关于这个声音听一下）是法国巴黎马尔斯广场上的一座锻铁格子塔。它是以工程师古斯塔夫·埃菲尔的名字命名的，他的公司设计并建造了这座塔。
使用浮动
日期：
2017年1月6日星期三
地点：
巴黎阿纳托尔大道5号马尔斯广场
信息：
埃菲尔铁塔（法语：Tour Eiffel，发音：[tuʁ‿fɛl]关于这个声音听一下）是法国巴黎马尔斯广场上的一座锻铁格子塔。它是以工程师古斯塔夫·埃菲尔的名字命名的，他的公司设计并建造了这座塔。

您可以使用

dt

上的

float:left

和

dd

，

清除：dt

上的两个和两个上的百分比宽度（根据需要调整值）

（未更改的HTML）

dt{
利润率：1米1米0；
浮动：左；
明确：两者皆有；
宽度：15%
}
dd{
利润率：1米0；
浮动：左；
宽度：80%；
}

日期：
2017年1月6日星期三
地点：
战神广场

法国阿纳托利大道5号

75007巴黎
信息：
埃菲尔铁塔（法语：Tour Eiffel，发音：[tuʁ‿fɛl]关于这个声音听一下）是法国巴黎马尔斯广场上的一座锻铁格子塔。它是以工程师古斯塔夫·埃菲尔（Gustave Eiffel）的名字命名的，他的公司设计了
建造了这座塔。

谢谢！没有宽度是不可能的？如果删除宽度，您将看到最后一个容器位于倒数第二个容器之下，因为它有足够的内容填充窗口/父窗口的整个宽度。所以你必须限制宽度，否则它会扩散到整个宽度。你可以用一个表来代替，但这与HTML完全不同。要使用表布局，我需要在HTML中添加额外的元素，对吗？创建行。是。完全切换到具有tr的表，用于行和td，而不是dt和dd。