如何设置dl和另一个dl的样式，使它们位于同一行

Question

我已经尝试了一个小时，但找不到方法。我的问题是那两个dl标签不能排成一行。

我的预期结果是什么这个

这是我的HTML:

<dl class="dropdown">
<dt>
<label style="font-weight:500;">SuperClass</label>
<a href="#">
<input class="hida form-control-sm" style="height:32px; font-weight:400; border:1px solid #d1d3e2;" value="SuperClass Filter" />
</a>
</dt>
<dd>
<div class="mutiSelect">
<ul style="height:auto;">
@Html.Action("_ClassPartialView")
</ul>
</div>
</dd>       
</dl>
<dl class="dropdown2">
<dt>
<label style="font-weight:500;">Status:</label>
<a href="#">
<input class="hida form-control-sm" style="height:32px; font-weight:400; border:1px solid #d1d3e2;" value="Status Filter" />
</a>
</dt>
<dd>
<div class="mutiSelectStatus">
<ul style="height:auto;">
<li><input type="checkbox" value="one" onchange="filter()" name="ab" />one</li>
<li><input type="checkbox" value="two" onchange="filter()" name="ab" />two</li>
</ul>
</div>
</dd>
</dl>

Answer 1

这可能非常快速和肮脏，但它可以为您工作
在dl周围添加一个包装器，就像我的container示例中一样(如果您还没有(。

.container {
display: flex;
}
.container dl {
max-width: 50%;
}

<div class="container">
<dl class="dropdown">
<dt>
<label style="font-weight:500;">SuperClass</label>
<a href="#">
<input class="hida form-control-sm" style="height:32px; font-weight:400; border:1px solid #d1d3e2;" value="SuperClass Filter" />
</a>
</dt>
<dd>
<div class="mutiSelect">
<ul style="height:auto;">
@Html.Action("_ClassPartialView")
</ul>
</div>
</dd>       
</dl>
<dl class="dropdown2">
<dt>
<label style="font-weight:500;">Status:</label>
<a href="#">
<input class="hida form-control-sm" style="height:32px; font-weight:400; border:1px solid #d1d3e2;" value="Status Filter" />
</a>
</dt>
<dd>
<div class="mutiSelectStatus">
<ul style="height:auto;">
<li><input type="checkbox" value="one" onchange="filter()" name="ab" />one</li>
<li><input type="checkbox" value="two" onchange="filter()" name="ab" />two</li>
</ul>
</div>
</dd>
</dl>
</div>

Answer 2

不确定这是否是您想要显示的唯一内容，但如果是，您可以简单地给这两个dl一个父div，并给它display: flex;的样式。

因为我不确定最终结果是什么(满表有很多额外的数据，或者只是这个(，所以很难给你适当的反馈。