如何左右对齐HTML和CSS中的每个备用列表项以及项目符号

debugcn 发表于 Dev

悉达思·巴蒂亚（Siddharth Bhatia）

我想右对齐备用列表元素，并保持另一个左对齐，使其成为ZIG-ZAG列表。

我能够做到这一点，但是没有子弹，右边的子弹仍然在左边，所以我该如何用子弹来做呢……

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

}

ul li {
    margin: 25px 0;
    padding-left: 45px;
}
ul li.odd {
    float:right;
}
    ul li.even {
        position:relative;
    }



 <ul>
   <li class="odd">
      Item1  
    </li>

     <li class="even">
        Item2
    </li>

穆罕默德·乌斯曼（Mohammad Usman）

为此，您需要使用CSS创建自定义项目符号，然后使用nth-child选择器对其进行样式设置，如下面的代码片段所示。

.styled-list {
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0;
}

.styled-list li {
  position: relative;
  padding-left: 10px;
  float: left;
}
.styled-list li:before {
  border-radius: 100%;
  position: absolute;
  background: #000;
  content: '';
  height: 5px;
  width: 5px;
  top: 6px;
  left: 0;
}
.styled-list li:nth-child(even) {
  padding-right: 10px;
  text-align: right;
  padding-left: 0;
  float: right;
}
.styled-list li:nth-child(even):before {
  left: auto;
  right: 0;
}

<ul class="styled-list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
</ul>

或者，您可以删除float以下内容：

.styled-list {
  list-style: none;
  max-width: 200px;
  padding: 0;
  margin: 0;
}

.styled-list li {
  position: relative;
  padding-left: 10px;
}
.styled-list li:before {
  border-radius: 100%;
  position: absolute;
  background: #000;
  content: '';
  height: 5px;
  width: 5px;
  top: 6px;
  left: 0;
}
.styled-list li:nth-child(even) {
  padding-right: 10px;
  text-align: right;
  padding-left: 0;
}
.styled-list li:nth-child(even):before {
  left: auto;
  right: 0;
}

<ul class="styled-list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。