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

I have a list on a rich text and the user is going to be able to move that list from left-center-right.

I found this image of a list doing what I do not need:

I need that if I move the list to the right, or to the center, the bullets keeps all aligned. In the image above the left list has the bullets aligned, while the one on the right are misaligned.

I created a pen where you can play around with 3 different lists. https://codepen.io/maketroli/pen/JjOgKqO?editors=1100

There you will see this code:

<ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>

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

It is for the last list where the bullets are close to the text but it has the bullets misaligned.

For example the second snippet has the text to the right but all the bullets aligned to the left. I need close to the text and aligned.

Any ideas?

I created the snippet here too:

.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 >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>
<hr />
<strong>Bullets Left</strong>
<hr />
<ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>
<hr />
<strong>Bullets Inside</strong>
<hr />
<ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>

CodePudding user response：

I tried to reproduce your issue and made some changes to it. Instead of moving the li , I move the ul part to the right using the flexbox property. I have attached the snippet. Hope that's how you wanted it to look.

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 >
  <li>Mountain Lion</li>
  <li>Lioness</li>
  <li>Cheetah</li>
</ul>
<hr />

CodePudding user response：

You can use flexbox for the solution.

You can wrap all your ul in div and then apply display: flex to all the divs like below:

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;
}

CodePudding user response：

Putting the bullets inside will not work as that gets them positioned with the text.

Wrapping the ul in a flexed element will get part there.

However, if you put the ul inside a flex justify content right container the bullets still remain at the left.

So this snippet wraps the ul in anothe div so the right justification does not directly affect the bullet positioning.

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

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

<div >
  <div>
    <ul>
      <li>Mountain Lion</li>
      <li>Lioness</li>
      <li>Cheetah</li>
    </ul>
  </div>
</div>

CodePudding user response：

Maybe it can help, i am sorry if a false

.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 >
  <ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>
</div>
<div >
  <ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>
</div>
<div >
  <ul>
  <li >Mountain Lion</li>
  <li >Lioness</li>
  <li >Cheetah</li>
</ul>
</div>