如何将 <li> 项目符号元素向右移动？

Question

看看这个截图。有两个

右侧的文本。除了元素之外，我还想要列表样式（项目符号），但正如您所见，它们相距甚远。

截屏

另外想将它们移动到顶部（正好在前 3 个文本的前面）。

.treeview-ul {
  margin-left: 1.5em;
  text-align: left;
}

.li-right {
  text-align: right !important;
}

<ul class="treeview-ul">
  <li><a href="setup-vpn-pptp-windows-vista">TEXT</a></li>
  <li><a href="setup-vpn-l2tp-windows-vista">TEXT</a></li>
  <li><a href="setup-vpn-sstp-windows-vista">TEXT</a></li>
  <div class="li-right">
    <li><a href="setup-vpn-openvpn-windows-vista">TEXT</a></li>
    <li><a href="setup-vpn-softether-windows">TEXT</a></li>
  </ul>
</div>

Answer 1

如果您想要一些额外的间距，您可能需要使用space-around而不是。space-between

.container {
  display: flex;
  justify-content: space-between;
  /*justify-content: space-around;*/
}

.treeview-ul {
  margin: 0 1.5em
  text-align: left;
}

<div class="container">
  <ul class="treeview-ul">
    <li><a href="setup-vpn-pptp-windows-vista">TEXT</a></li>
    <li><a href="setup-vpn-l2tp-windows-vista">TEXT</a></li>
    <li><a href="setup-vpn-sstp-windows-vista">TEXT</a></li>
  </ul>
  <ul class="treeview-ul">
    <li><a href="setup-vpn-openvpn-windows-vista">TEXT</a></li>
    <li><a href="setup-vpn-softether-windows">TEXT</a></li>
  </ul>
</div>