当其中一个元素中的文本溢出时，<li> 元素会失去所需的对齐方式[重复]

Posted 2023-03-05

【中文标题】当其中一个元素中的文本溢出时，<li> 元素会失去所需的对齐方式[重复]

【英文标题】：<li> elements lose desired alignment when text in one of them overflows [duplicate]

【发布时间】：2018-07-23 14:24:00

【问题描述】：

我正在尝试创建一个成分列表，我在其中使用 ul 和 li 元素，每个 divs 内部每个 li 元素用于每种不同的信息类型（数量、描述或价格）。在第三个li 元素中，描述太长，无法放入其自身 div 的正常空间中。这会导致它向下溢出（而不是向右）。这很好，但问题是由于此溢出，下一个li 元素在错误的位置开始。我已经标记了在错误位置呈现的文本。

ul 
  list-style: none;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
  <ul>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        thawed puff pastry sheet
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        2 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        All-purpose flour, for rolling
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        5 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        10 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
        <!--- WRONG PLACE. Should start on new row -->
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Large egg, beaten
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Baguette slices or crackes, to serve
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
  </ul>
</div>

即使上面的元素溢出，我该怎么做才能让每个 li 元素从新行开始？

【问题讨论】：

您必须首先将 col 元素放入 rows 中，这是网格系统的基本工作原理。

@BramVanroy：Bootstrap CSS 未正确包含在您创建的 sn-p 中

已修复。以后请使用 sn-ps 而不是外部服务。另请注意，您使用的是旧版本的引导程序。

@Sahand 不要删除问题，只是自我回答。它将作为拼写错误关闭，但仍可作为参考。

【参考方案1】：

将row 类添加到您的

项。

<li class="row">...</li>

【讨论】：

不幸的是不仅这个..他还需要容器等

【参考方案2】：

这是因为 col-* 类中的 float:left。要解决此问题，请使用 <li> 中的 .row 类

也无需使用相同的sm、md、lg 值。如果您希望所有屏幕都使用相同的网格结构，只需在此处使用xs...

...如果您想要相同的网格结构直到sm 断点，则仅使用sm

堆栈片段

ul 
  list-style: none;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="container-fluid">
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      thawed puff pastry sheet
    </div>
    <div class="col-xs-3">
      2 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      All-purpose flour, for rolling
    </div>
    <div class="col-xs-3">
      5 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
    </div>
    <div class="col-xs-3">
      10 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      Large egg, beaten
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      Baguette slices or crackes, to serve
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
</ul>

【讨论】：

我们还需要容器 .. 不仅是行

@TemaniAfif 是的...更新...