Question

我正在尝试创建一个下拉菜单，其中子项与父项相比居中对齐。

我已经尝试设置margin: auto;或设置left: -50%; right: -50%以及我在网上找到的其他解决方案，但似乎没有什么对我有用。

我怎样才能做到这一点？

.header {
  /*background-image: url("../images/top_menu.png");*/
  width: 100%;
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  position: fixed;
  top: 0;
  background-origin: border-box;
  height: 68px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 5%;
  padding-top: 15px;
  padding-bottom: 10px;
  overflow: hidden;
  display: inline-block;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: #000;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  background-color: #fff;
  margin: 5px;
  border-radius: 30px;
  min-width: 160px;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: black;
  color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  text-align: center;
}

.dropdown-content a {
  color: #e6e6e6;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  background-color: #333333;
}

.dropdown-content a:hover {
  background-color: #e6e6e6;
  color: #333333;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="header">
  <ul class="drop_menu">
    <li class="dropdown">
      <a href='#' class="dropbtn">Products</a>
      <div class="dropdown-content">
        <a href='auto_tender_commercial.html'>Link 1</a>
        <a href='fruit_series.html'>Link 2</a>
        <a href='smart_sensors.html'>Link 3</a>
      </div>
    </li>
    <li class="dropdown">
      <a href='#' class="dropbtn">Bar Service Packages</a>
      <div class="dropdown-content">
        <a href='what_is_it.html'>Really long long long long long long long link</a>
        <a href='what_is_it.html'>Link 4</a>
        <a href='leasing_plan.html'>Link 5</a>
      </div>
    </li>
    <li><a href='event_leasing.html'>Event Leasing</a></li>
  </ul>
</div>

View on JSFiddle

Answer 1

在评论中，有人建议jQuery可以选择。

ArrayList

这是我的小提琴：https://jsfiddle.net/pg60qetq/3/

我不得不稍微改变一下CSS。我将位置从String更改为$(".dropdown-content").each(function() { $(this).css({ 'left' : '50%', 'margin-left' : $(this).width() / 2 * - 1 + 'px' }); });，删除了一些有问题的高度和溢出属性。

希望这有帮助。

Answer 2

好的，所以你的父母是固定的宽度，孩子比父元素大，也是最小宽度：150px。父母应该以孩子为中心。

目前的问题是您的孩子是绝对的，因此他们不会消耗父元素内的空间。所以你的父元素不知道孩子有多大，以及中心必须在哪里。

为了确保你的父母知道孩子的中心在哪里，孩子们必须有一些显示：设置除“none”以外的设置，因为这使得他们不占用空间，并且他们必须相对定位。因为我们仍然希望在不悬停时隐藏元素，我们将给它一个0的高度和visiblity：hidden;

li.dropdown {
    display: inline-block;
    text-align: center;
}

.dropdown-content {
    visibility: hidden;
    height: 0;
    position: relative;
    min-width: 160px;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    height: auto;
}

我将测试用例缩减为单个下拉列表：

https://jsfiddle.net/pg60qetq/1/

这样父母会占用尽可能多的空间。

这是包含所有三个下拉列表的版本： https://jsfiddle.net/pg60qetq/2/ 现在，由于父级实际上更大，所以元素包装在一个小显示器上。

如何将下拉菜单的子项置于父级？

2 个答案: