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

【问题标题】：How to align second line in a bullet-ed un-ordered list如何对齐项目符号无序列表中的第二行
【发布时间】：2019-05-29 17:27:17
【问题描述】：

我的食谱网站上有一个项目符号未排序的成分列表。我在列表周围有一些填充，以便它显示在页面的中心。但是，当我在 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;
    }

}

这正是页面的样子：

【问题讨论】：

您能否也发布 HTML 以便我们知道结构是如何构建的？

标签： html css squarespace

【解决方案1】：

您正在将填充应用于每个 <li> 元素的 ::before 选择器。从那里删除它并将其添加到<ul> 元素。

@media only screen and (max-width : 480px)
{ 
    ul[data-rte-list] {
        padding-left: 100px;
    }

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：