列表项突出显示，但未整行显示

Question

我目前的fiddle除了一件事之外还可以正常工作。当我将鼠标悬停在按钮上时，我看到显示的列表。然后，当我将鼠标悬停在列表项上时，背景会更改颜色，这一切都很好。但是，当列表项更改颜色时，该项目的左侧几乎有一个框没有被突出显示并且似乎无法摆脱它？

.dropbtn {
    background-color: #9FACEC;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
 }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
 }

.dropdown-content li {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}

Answer 1

如果我了解你。我相信您正在寻求删除ui边距。您可以使用

ul{
padding: 0;
margin: 0;
}

Answer 2

我相信以下方法可以解决您的问题。这是由ul元素具有默认填充引起的。我还添加了box-sizing: border-box到列表元素，因此填充不会使li元素伸出ul。

我在摘要下方添加了解释。

解决方案关键部分

.dropdown-content #regionList {
  padding: 0;
}

.dropdown-content li {
    color: black;
    padding: 12px 16px;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
}

摘要

$(document).ready(function() {

  var $region = $('#regionList');
  $region.append('<li id="Europe">Europe</li>');
  $region.append('<li id="Japan">Japan</li>');
  $region.append('<li id="North America">North America</a></li>');

  $("#regionList li").click(function() {
    alert('Clicked list. ' + this.id);
  });

})

/* Dropdown Button */

.dropbtn {
  background-color: #9FACEC;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content #regionList {
  padding: 0;
}

.dropdown-content li {
  color: black;
  padding: 12px 16px;
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content li:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #4C66E9;
}

.selected {
  background: #FF00FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">Regions</button>
  <div class="dropdown-content">
    <ul id="regionList"></ul>
  </div>
</div>

说明

问题是由浏览器的默认CSS规则（适用于Chrome）引起的：

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

您可以看到更多here。

Answer 3

其他答案是正确的。我只是想解释发生了什么。

您的用户代理样式表包含-webkit-padding-start: 40px;个元素的ul。

在这里以绿色表示。

正如其他答案所述，请为您的用户代理样式表设置的padding元素覆盖ul样式。

Answer 4

默认情况下，HTML tags的大多数具有一些默认样式，ul tag中也是如此，这就是当您将鼠标悬停在li tags上时left-side不是{{1 }}。

默认ul样式

highlighted

ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

$(document).ready(function() {

  var $region = $('#regionList');
  $region.append('<li id="Europe">Europe</li>');
  $region.append('<li id="Japan">Japan</li>');
  $region.append('<li id="North America">North America</a></li>');

  $("#regionList li").click(function() {
    alert('Clicked list. ' + this.id);
  });

})

    /* Dropdown Button */

    .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }

    /* The container <div> - needed to position the dropdown content */

    .dropdown {
      position: relative;
      display: inline-block;
    }

    ul {
      padding: 0px;
      margin: 0px;
    }

    /* Dropdown Content (Hidden by Default) */

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    /* Links inside the dropdown */

    .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    /* Change color of dropdown links on hover */

    .dropdown-content li:hover {
      background-color: #ddd;
    }

    /* Show the dropdown menu on hover */

    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */

    .dropdown:hover .dropbtn {
      background-color: #4C66E9;
    }

    .selected {
      background: #FF00FF;
    }

/*Add this*/
ul{
  padding-left:0px;
}

Answer 5

只需将padding 0添加到您的 regionList

#regionList{
  padding : 0;
}