jquery - div 内表格中的不均匀元素未正确对齐

Question

我无法对齐表中的元素，我在下面提供了两个图像。图像 1 第一列有 7 行，第二列有 4 行，它应该像图像 2 一样对齐到顶部，即使它有行数不均匀。

以下是图片:

$("#action").click(function() {
  if ($("#actiondetails").is(":visible")) {
    $("#actiondetails").hide();
  } else {
    $('#actiondetails').show();
  }
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('#action').length) {
    // Hide the menus.
    $('#actiondetails').hide();
  }
});

.dropbtn {
  background-color: black;
  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: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  vertical-align: bottom;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.link-format {
  list-style-type: none;
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="dropbtn" id="action">Dropdown
    <div class="dropdown-content" id="actiondetails">
      <table>
        <tr>
          <td>
            <ul class="link-format" style="border-right:1px gray dashed">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
            </ul>
          </td>
          <td>
            <ul class="link-format">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

要实现此目的，您需要在下拉菜单中的 td 上设置 vertical-align: top:

.dropdown-content td { 
  vertical-align: top;
}

$("#action").click(function() {
  if ($("#actiondetails").is(":visible")) {
    $("#actiondetails").hide();
  } else {
    $('#actiondetails').show();
  }
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('#action').length) {
    // Hide the menus.
    $('#actiondetails').hide();
  }
});

.dropbtn {
  background-color: black;
  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: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  vertical-align: bottom;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown-content td { 
  vertical-align: top;
}

.link-format {
  list-style-type: none;
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="dropbtn" id="action">Dropdown
    <div class="dropdown-content" id="actiondetails">
      <table>
        <tr>
          <td>
            <ul class="link-format" style="border-right:1px gray dashed">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
            </ul>
          </td>
          <td>
            <ul class="link-format">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>