Question

我不希望这些行溢出到下一行。即行的详细信息应在同一行上。到目前为止，我已经尝试过了。但是显然是不正确的。

<div class="container">
<div class="row">
    <div class="col-12 text-right">
        <ul class="list-unstyled">
            <li>Address: DetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
            <li>Telephone: DetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetails</li>
            <li>Fax: DetailsDetailsDetails</li>
            <li>Email: DetailsDetailsDetails</li>
        </ul>
    </div>
</div>

这是我尝试过的代码：https://www.codeply.com/go/3kyZUPbLoR

Answer 1

在列表项上使用text-nowrap和<div class="container"> <div class="row"> <div class="col-12"> <ul class="list-unstyled float-right"> <li class="text-nowrap">Line1: DetailsDetailsDetailsDetailsDetailsDetailsDetails</li> <li class="text-nowrap">Line2: DetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetailsDetails</li> <li class="text-nowrap">Line3: DetailsDetailsDetails</li> </ul> </div> </div> </div> ...

* Serving Flask app "ResetPOE" (lazy loading) 

* Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: on

https://www.codeply.com/go/OZaLa2kP1L

Answer 2

如何在Flexbox中使用<dl>？

HTML

<div class="container">
    <div class="d-flex flex-row-reverse">
        <dl class="dl-horizontal">
            <dt>Address:</dt>
            <dd>Address here</dd>
            <dt>Telephone:</dt>
            <dd>123456</dd>
            <dt>Email:</dt>
            <dd>email@email.com</dd>
            <dt>Fax:</dt>
            <dd>123454</dd>
        </dl>   
    </div>
</div>

CSS

dl.dl-horizontal {
    display: flex;
    flex-wrap: wrap;
    font-size: 75%;
    flex: 0 1 40%;
}

dl.dl-horizontal dt,
dl.dl-horizontal dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: .25rem solid red;
}

dl.dl-horizontal dt {
    flex: 0 0 40%;
}

dl.dl-horizontal dd {
    flex: 0 0 60%;
    margin-bottom: 0;
}

dt 上的flex: 0 0 40%和 dd 上的flex: 0 0 60%的样式主要是为了确保 dt 和<每行strong> dd 。它们的样式也被设置为在溢出时显示省略号，所以我们在那里很好。

为了使 dl 向右浮动，而不是使用float:right;，我将 dl 包裹在一个弹性盒中，并设置为以相反的顺序显示其项目， flex-row-reverse。最后要做的是为 dl 设置适当的宽度。您可以使用width:WHATEVER_WIDTH;或我在这里使用的语言：flex: 0 1 WHATEVER_PERCENTAGE%;。

https://jsfiddle.net/davidliang2008/qu1behny/32/

Bootstrap上的右对齐列，无序列表，没有换行文本

2 个答案:

HTML

CSS