Question

有一个“Dropdown”按钮，点击该按钮会打开一个带有选项1,2和3的下拉菜单。但每个选项下面都有一个额外的空间，这很尴尬。我想在每个下拉菜单项的末尾删除多余的空格

var myFunc = function myFunc() {
  document.getElementById("mysociDropdown").classList.toggle('show');
}

.socidropbtn {
  border-radius: 4px;
  background-color: #008781;
  color: black;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 14px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
/* Dropdown button on hover & focus */

.socidropbtn:hover,
.socidropbtn:focus {
  background-color: #006661;
}
/* The container <div> - needed to position the dropdown content */

.socidropdown {
  padding-bottom: 0px;
  position: relative;
  display: inline-block;
  text-align: center;
}
/* Dropdown Content (Hidden by Default) */

.socidropdown-content {
  padding-bottom: 2px;
  display: none;
  position: absolute;
  background-color: #d9d9d9;
  min-width: 130px;
}
/* Links inside the dropdown */

.socidropdown-content a {
  color: black;
  padding-bottom: 0px;
  padding: 1px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */

.socidropdown-content a:hover {
  background-color: #006661
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="socidropdown">
  <button onclick="myFunc()" class="socidropbtn">Dropdown</button>
  <div id="mysociDropdown" class="socidropdown-content">
    <a href="one.php">one</a>
    <a href="two.php">two</a>
    <a href="three.php">three</a>
  </div>
</div>

Answer 1

看起来问题是你在padding:之后声明padding-bottom所以padding-bottom不起作用。请试试这个：

var d = document.getElementById("mysociDropdown");

function myFunc(){
  d.classList.toggle("show");
}

.socidropbtn {
  border-radius: 4px;
  background-color: #008781;
  color: black;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 14px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
/* Dropdown button on hover & focus */

.socidropbtn:hover,
.socidropbtn:focus {
  background-color: #006661;
}
/* The container <div> - needed to position the dropdown content */

.socidropdown {
  padding-bottom: 0px;
  position: relative;
  display: inline-block;
  text-align: center;
}
/* Dropdown Content (Hidden by Default) */

.socidropdown-content {
  padding-bottom: 2px;
  display: none;
  position: absolute;
  background-color: #d9d9d9;
  min-width: 130px;
}
/* Links inside the dropdown */

.socidropdown-content a {
  color: black;
  /*need to declare padding prior to padding-bottom*/  
  padding: 10px;
  padding-bottom: 0px;
  text-decoration: none;
  display: block;
  
  border: 1px solid green;
}
/* Change color of dropdown links on hover */

.socidropdown-content a:hover {
  background-color: #006661
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="socidropdown">
  <button onclick="myFunc()" class="socidropbtn">Dropdown</button>
  <div id="mysociDropdown" class="socidropdown-content">
    <a href="one.php">one</a>
    <a href="two.php">two</a>
    <a href="three.php">three</a>
  </div>
</div>

下拉菜单Css额外空间

1 个答案: