对齐列表样式类型li内容的底部

Question

<ul dir="rtl" type="disc">
  <li>info@something.com</li>
  <li>career</li>
  <li>location</li>
</ul>

我想对齐li内容的列表样式类型光盘底部，现在它位于内容的末尾。

Answer 1

您需要使用pseudo selector :after，然后您可以style与list-style:disc非常相似，然后使用底部属性对齐每个li标记的底部，

＆＃13;

＆＃13;

li {
  display: block;
  position: relative;
  margin-bottom: 20px;
}

li:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #111;
  border-radius: 50%;
  right: 0;
  bottom: -10px;
}

＆＃13;

<ul dir="rtl" type="disc">
  <li>info@something.com</li>
  <li>career</li>
  <li>location</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从 UI 删除了 dir =“rtl”，只需添加此样式 float：right; 。

所以它就像：

<ul type="disc" style="float:right">

Answer 3

你可以在“之前”使用伪元素，并按照你想要的方式定位。

ul {
  padding-left: 0;
  list-style-type: none;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

li::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nulla, ipsam architecto. Pariatur quod officiis, facilis nisi optio cupiditate expedita, maxime soluta, beatae perspiciatis impedit sint eligendi possimus dolore quidem!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nulla, ipsam architecto. Pariatur quod officiis, facilis nisi optio cupiditate expedita, maxime soluta, beatae perspiciatis impedit sint eligendi possimus dolore quidem!</li>
</ul>

Answer 4

试试这个

HTML

<ul dir="rtl" type="disc" class="list">
                   <li>info@something.com</li>
                   <li>career</li>
                  <li >location</li>
                </ul>

CSS

.list{
  list-style-type:none;
}
.list > li{
  position: relative;
  margin:10px;

}
.list>li::after{
  content:"";
  height:10px;
  width:10px;
  border-radius:50px;
  background-color: #000;
  position: absolute;
  right:0px;;
  bottom:-10px;
  margin:auto;
  display:inline-block;
}

Link for reference