1

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

我已经尝试过设置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>

在 JSFiddle 上查看

4

2 回答 2

3

在评论中，有人建议 jQuery 可以作为一个选项。

$(".dropdown-content").each(function() {
    $(this).css({
       'left' : '50%',
       'margin-left' : $(this).width() / 2 * - 1 + 'px'
    });
});

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

我不得不稍微改变一下 CSS。我将位置从 更改DIV为UL，删除了一些有问题的高度和溢出属性。

希望这可以帮助。

于 2017-01-16T18:12:45.853 回答
-1

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

当前的问题是您的孩子是绝对定位的，因此它们不会占用父元素内的空间。所以你的父元素不知道孩子有多大，以及中心必须在哪里。

为了确保您的父母知道孩子的中心在哪里，孩子必须有一些显示：设置“无”以外的设置，因为这会使它们不占用空间，并且它们必须相对定位。由于我们仍然希望元素在未悬停时隐藏，我们将给它一个高度 0 和可见性：隐藏；

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/ 现在由于父级实际上更大，元素包裹在一个小显示器上。

于 2017-01-16T17:59:17.613 回答