gpt4 book ai didi

html - 如何使一个 dl 列表水平?

转载 作者:行者123 更新时间:2023-11-28 15:12:47 25 4
gpt4 key购买 nike

我有 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 垂直放置在彼此下方,但我需要使其看起来像这样:enter image description here

我该怎么做?

最佳答案

通过将成对的 dtsdd 包装在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com