Блог

У меня возникли трудности с выравниванием этого неупорядоченного списка внутри другого списка заказов, может кто-нибудь помочь мне, как это исправить, ниже приведен мой код, спасибо.

css

  <style>
    .dropbtn {
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color:black;
      color:white;
      min-width: 160px;
      overflow: none;
      z-index: 1;
    }
    .show {display: block;}     
</style>
 

JS

 <script>
    
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
 

HTML

 <h5>Menu</h5>
<ul class="dropdown">
  <li class="bullet-arrow"><span style="font-size: 90%;"><a href="/about">About us</a></span></li>
  <li class="bullet-arrow"><span style="font-size: 90%;"><a href="/blog">Blog</a></span></li>
  <li class="bullet-arrow"><span style="font-size: 90%;"><a href="/contact">Contact</a></span></li>
  <li onclick="myFunction()" class="dropbtn bullet-arrow"><span style="font-size: 90%;"><a>Terms amp; Conditions</a></span>
    <ul id="myDropdown" class="dropdown-content">
      <li style="font-size: 90%;">Privacy Policy</li>
      <li style="font-size: 90%;">Service Agreement</li>
      <li style="font-size: 90%;">Terms Of Use</li>
      <li style="font-size: 90%;">Vendor Agreement</li>
    </ul>
  </li>
</ul>
 

Вам просто нужно добавить padding-left: 0 в свой .dropdown-content . Это так просто.

Если вы хотите, вы можете попробовать другие значения. Я думаю, что в Google Chrome это 40px по умолчанию

Обновить:

Я вижу .dropbtn , что у padding: 16px . Убедитесь, что это не мешает. Если это так, попробуйте также добавить начальное поле.

Например:

 ul ul.dropdown-content {
  padding-left: 0;
  margin-left: -16px
}
 

В CSS , попробуйте добавить .dropdown-content{ float: left;} свойство. Полный код:

 .dropdown-content {
      display: none;
      position: absolute;
      background-color:black;
      color:white;
      min-width: 160px;
      overflow: none;
      z-index: 1;
      float left;
    }