当列表向右对齐时，如何使列表的项目符号保持对齐？

Question

我有一个富文本列表，用户将能够从左-中-右移动该列表。

我发现这张列表图片正在执行我不需要的操作：

我需要在将列表向右或向中心移动时，项目符号保持对齐。在上图中，左侧列表的项目符号对齐，而右侧列表未对齐。

我创建了一支笔，您可以在其中玩转 3 个不同的列表。 https://codepen.io/maketroli/pen/JjOgKqO?editors=1100

在那里你会看到这段代码：

<ul>
  <li class="bullets-inside">Mountain Lion</li>
  <li class="bullets-inside">Lioness</li>
  <li class="bullets-inside">Cheetah</li>
</ul>

.bullets-inside {
  text-align: right;
  list-style-position: inside;
}

这是最后一个列表，项目符号靠近文本但项目符号未对齐。

例如，第二个代码段的文本在右侧，但所有项目符号都在左侧对齐。我需要靠近文本并对齐。

有什么想法吗？

我也在这里创建了代码段：

.bullets-left {
  text-align: left;
}

.bullets-right {
  text-align: right;
}

.bullets-inside {
  text-align: right;
  list-style-position: inside;
}

<hr />
<strong>Bullets Right</strong>
<hr />
<ul>
  <li class="bullets-right">Mountain Lion</li>
  <li class="bullets-right">Lioness</li>
  <li class="bullets-right">Cheetah</li>
</ul>
<hr />
<strong>Bullets Left</strong>
<hr />
<ul>
  <li class="bullets-left">Mountain Lion</li>
  <li class="bullets-left">Lioness</li>
  <li class="bullets-left">Cheetah</li>
</ul>
<hr />
<strong>Bullets Inside</strong>
<hr />
<ul>
  <li class="bullets-inside">Mountain Lion</li>
  <li class="bullets-inside">Lioness</li>
  <li class="bullets-inside">Cheetah</li>
</ul>

Answer 1

也许可以帮到你，如果是假的我很抱歉

.box1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.box2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.box div {
  width: 100px;
  height: 100px;
}

<div class="box1">
  <ul>
  <li class="bullets-right">Mountain Lion</li>
  <li class="bullets-right">Lioness</li>
  <li class="bullets-right">Cheetah</li>
</ul>
</div>
<div class="box2">
  <ul>
  <li class="bullets-right">Mountain Lion</li>
  <li class="bullets-right">Lioness</li>
  <li class="bullets-right">Cheetah</li>
</ul>
</div>
<div class="box3">
  <ul>
  <li class="bullets-right">Mountain Lion</li>
  <li class="bullets-right">Lioness</li>
  <li class="bullets-right">Cheetah</li>
</ul>
</div>

Answer 2

您可以使用 flexbox 作为解决方案。

您可以 wrap div 中的所有 ul，然后将 display: flex 应用于所有 divs，如下所示：

HTML :

<hr />
  <strong>Bullets Right</strong>
<hr />

<div class='bullets-right'>
  <ul>
    <li>Mountain Lion</li>
    <li>Lioness</li>
    <li>Cheetah</li>
  </ul>
</div>

<hr />
  <strong>Bullets Left</strong>
<hr />

<div class='bullets-left'>
  <ul>
    <li>Mountain Lion</li>
    <li>Lioness</li>
    <li>Cheetah</li>
  </ul>
</div>

<hr />
  <strong>Bullets Center</strong>
<hr />

<div class='bullets-center'>
  <ul>
    <li>Mountain Lion</li>
    <li>Lioness</li>
    <li>Cheetah</li>
  </ul>
</div>

CSS :

.bullets-right {
  display: flex;
  justify-content: flex-end;
}

.bullets-left {
  display: flex;
  justify-content: flex-start;
}

.bullets-center {
  display: flex;
  justify-content: center;
}

Answer 3

我试图重现您的问题并对其进行了一些更改。我没有移动 li ，而是使用 flexbox 属性将 ul 部分移动到右侧。我附上了片段。希望这就是您想要的样子。

ul {
 list-style-position: inside;
  display: flex;
  flex-direction: column;
  width: 100%;
}
li {
  float: right;
  min-width:200px;
}

.list-right {
  justify-content: end;
  align-items:end;
}

<hr />
<strong>Bullets Right</strong>
<hr />
<ul class="list-right">
  <li>Mountain Lion</li>
  <li>Lioness</li>
  <li>Cheetah</li>
</ul>
<hr />

Answer 4

将项目符号放在里面是行不通的，因为这样会使它们与文本一起定位。

将 ul 包裹在一个灵活的元素中将成为其中的一部分。

但是，如果将 ul 放在 flex justify content right container 中，项目符号仍保留在左侧。

因此此代码段将 ul 包装在另一个 div 中，因此正确的对齐方式不会直接影响项目符号的定位。

.container {
  display: flex;
  justify-content: right;
}

.container>div>ul li {
  text-align: right;
}

<div class="container">
  <div>
    <ul>
      <li>Mountain Lion</li>
      <li>Lioness</li>
      <li>Cheetah</li>
    </ul>
  </div>
</div>

当列表向右对齐时，如何使列表的项目符号保持对齐？

How can I keep the bullets of a list aligned when the list is aligned to the right?

html

css

frontend