How to move <li> bullet element to the right?

user_12160011 0
Viewed 1526

Look at this screenshot. There is two

  • text which is on the right side. I want to have the list-style (bullet) besides its elements but as you see they are far from together.

    screenshot

    Additionally want to move them in the top (exactly in front of the first 3 texts.

    .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>

    • css html
    4 Answers

    Add float: right and it will align to the right.

    /* CSS: */

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

.li-right {
  /*text-align: right !important;*/
  float: right; /* Add float right */
}
    <!-- HTML: -->

<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>
  </div>
</ul>

    user_76530070

    You might want to use space-around instead of space-between if you want some additional spacing.

    .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>

    user_63035410

    First of all, it is not a good practice to have a DIV inside a UL. You are better off using 2 ULs as shown below and float the second UL to the right. You can wrap both in a DIV if you want.

    /* CSS: */
.li-left {
  margin-left: 1.5em;
  text-align: left;
}

.li-right {
  float: right; 
  margin-right: 1.5em;
}
    <!-- HTML: -->

<ul class="li-left">
  <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="li-right">
    <li><a href="setup-vpn-openvpn-windows-vista">TEXT</a></li>
    <li><a href="setup-vpn-softether-windows">TEXT</a></li>
</ul>

    user_6774180

    You don't need to do much with the code to indent that second level of list item. But you do need to change a few things.

    The first CSS class can be removed, most of that is not addressing any styling that isn't present already in the standards.

    The second thing to do is to change the DIV to a UL instead, this is what is creating the second level indentation list item.

    Keeping that class name in place, all you need to do is add a negative margin-left to move the indentation back to where it lines up with the list item above. 

    .li-right li {
  margin-left: -1.5em;
}
    <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 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>
</ul>

    user_10612370
    Related