我有 dl 列表,但我需要让它不是垂直的,而是水平的,我只需要一个 dl 列表。我正在使用 bootstrap 4,所以也许它可以用 flexbox 来完成?
HTML:
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row text-center">
<dl class="footer-top-list">
<dt class="footer-top-termin col-md-4">Location</dt>
<dd class="col-md-4">3481 Melrose Place</dd>
<dd class="col-md-4">Beverly Hills, CA 90210</dd>
<dt class="footer-top-termin col-md-4">Share with love</dt>
<dd class="col-md-4">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</dd>
<dt class="footer-top-termin col-md-4">About</dt>
<dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
auctor fringilla.
</dd>
</dl>
</div>
</div>
</div>
<div class="footer-bottom">
</div>
</footer>
现在我将所有的 dt 和 dd 垂直放置在彼此下方,但我需要使其看起来像这样:
我该怎么做?
最佳答案
通过将成对的 dts
和 dd
包装在 div
中,您可以使用 Bootstrap 类将这些组组织为列。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="text-center">
<dl class="row footer-top-list">
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">Location</dt>
<dd class="col-md-4">3481 Melrose Place</dd>
<dd class="col-md-4">Beverly Hills, CA 90210</dd>
</div>
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">Share with love</dt>
<dd class="col-md-4">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</dd>
</div>
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">About</dt>
<dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="footer-bottom">
</div>
</footer>
注意:整页的vue代码段触发md
断点。
关于html - 如何使一个 dl 列表水平?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47963599/