如何在项目符号排序的无序列表中对齐第二行

Question

我的食谱网站上有一个无序列表的配料列表。我在列表周围有一些填充，以便将其显示在页面的中央。但是，当我在iPhone或平板电脑（屏幕较窄的设备）上查看页面时，我的项目符号要推到2行，而第二行与第一行不符。

我认为这是由于列表周围有填充代码所致，因此在狭窄的屏幕上，项目符号仍位于页面的中心。当项目符号点太长以至于必须移至2行时，第二行会一直推到最左侧，而项目符号仍然居中。我希望将第二行与第一行对齐（仍然居中在页面上）

但是我尝试将其定位在“项目符号”之外，因为我用代码创建了自己的项目符号，但这似乎行不通。

下面的代码是我用于此问题的蜂窝设备显示的代码。

    @media only screen and (max-width : 480px)
    { ul[data-rte-list] li>*:first-child::before  {
        content: "•";
        position: outside;
        line-height: 1.5em !important;
        top: 2px;
        padding-right: 10px;
        font-size: 22px;
        padding-left: 100px;
        color: #373737;
        opacity: .4;
    }

}

这正是页面的外观：

Answer 1

您正在将填充应用于每个template <size_t Bstart, size_t Blen, typename T = uint16_t> struct BitField { T value; // zero-based, not shifted static constexpr T mask() { return ((1 << Blen)-1) << Bstart; } static T clear(T r) { return r & ~mask(); } void decode(T r) { value = (r & mask()) >> Bstart; } T encode(T r) { return clear(r) | ((value << Bstart) & mask()); } // etc. }; using HzField = BitField<7, 3>; 元素的:: before选择器。 从此处删除它，并将其添加到<li>元素中。

<ul>

Answer 2

这只是一个疯狂的尝试，但是从我的角度来看，您正在将padding应用于li的子元素。您应该将其应用于ul元素，以便填充整个列表。

div {
  width: 400px;
  margin: auto;
  background-color: #dadada;
}

ul {
  list-style: none;
  padding-left: 100px;
}


ul li > *:first-child::before {
  content: "•";
  position: outside;
  line-height: 1.5em !important;
  top: 2px;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
}

<div>
<ul>
  <li>
    <span>1 can coconut milk</span>
  </li>
  <li>
    <span>1/4 cup date syrup (substitute maple syrup or honey)</span>
  </li>
  <li>
    <span>1 tsp vanilla</span>
  </li>
</ul>
</div>

Answer 3

基于uom-pregorio的答案，您可以使列表项成为flexbox容器，以使所有文本真正与第一行对齐。

我还将::before的sudo元素移到了<li>本身，以便它不包含在<span>内，因为我们希望它们作为兄弟姐妹彼此相邻。

div {
  width: 400px;
  margin: auto;
  background-color: #dadada;
}

ul {
  list-style: none;
  padding-left: 100px;
}

ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

ul li::before {
  content: "•";
  line-height: 1.5em !important;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
  width: content;
  margin: 0;
}

ul li>*:first-child {
  flex-grow:2;
  padding-top: 0.5em;
}

<div>
  <ul>
    <li>
      <span>1 can coconut milk</span>
    </li>
    <li>
      <span>1/4 cup date syrup (substitute maple syrup or honey)</span>
    </li>
    <li>
      <span>1 tsp vanilla</span>
    </li>
  </ul>
</div>

有关更多信息，请访问此网站：A Complete Guide to Flexbox