Question

我有一个包含ul和li的菜单。一些菜单在另一个ul和li内有子菜单。现在所有子菜单都按顺序排列。我需要让子菜单根据他们的父李完全居中。我怎样才能实现它？

<ul id="lorem-ipsum-main">
    <li id="btn-header-wrapper" class="main-btn">
      <a href="#" id="btn-T">T</a>
      <ul>
        <li>
          <a href="#" id="btn-T1">T1</a>
        </li>
        <li>
          <a href="#" id="btn-T2">T2</a>
        </li>
        <li>
          <a href="#" id="btn-T3">T3</a>
        </li>
        <li>
          <a href="#" id="btn-T4">T4</a>
        </li>
      </ul>
    </li>
    <li class="main-btn">
      <a href="#" id="btn-E"><b>E</b></a>
    </li>
    <li id="btn-justify-wrapper" class="main-btn">
      <a href="#" id="btn-gender">Gender</a>
      <ul>
        <li>
          <a href="#" id="btn-M">M</a>
        </li>
        <li>
          <a href="#" id="btn-F">F</a>
        </li>
        <li>
          <a href="#" id="btn-other">other</a>
        </li>
      </ul>
    </li>
    <li class="main-btn" id="btn-list-wrapper">
      <a href="#" id="btn-list">List</a>
      <ul>
        <li>
          <a href="#" id="btn-1list">List 1</a>
        </li>
        <li>
          <a href="#" id="btn-2list">List 2</a>
        </li>
      </ul>
    </li>
    <span class="clear_both"></span>
</ul>

Answer 1

我们在制作父width:100%的同时让孩子为li {position:relative}这样做可以让我们更改子ul的top和left值，以便结束结果类似于 this

代码：

#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn {
  float: left;
  padding: 5px 10px;
  text-align: center;
  min-width: 18px;
  position: relative;
}

#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul {
  position: absolute;
  background: white;
  box-shadow: 1px 1px 3px 0px lightgray;
  top:100%;
  width: 100%;
  left:0;
}

Answer 2

如果您只是希望子菜单能够以他们的父li为中心的和那么宽，那么您可以使用：

#lorem-ipsum-wrapper #lorem-ipsum-main li {
  list-style: none;
  position: relative; /* positioning content */
}

#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul {
  position: absolute;
  white-space:nowrap; /* menu as wide as it needs to be */
  left: 50%; /* align halfway over */
  transform:translateX(-50%); /* pull back half own width */
  background: white;
  box-shadow: 1px 1px 3px 0px lightgray;
}

Codepen Demo

* {
  margin: 0;
  padding: 0;
}
.clear_both {
  display: block;
  clear: both;
}
#lorem-ipsum-wrapper {
  width: 190px;
  margin: 0 auto;
  font-size: 12pt;
}
#lorem-ipsum-wrapper #lorem-ipsum-main {
  background: #e1e1e1;
  width: 190px;
  border-radius: 5px;
  position: fixed;
}
#lorem-ipsum-wrapper #lorem-ipsum-main li {
  list-style: none;
  position: relative;
}
#lorem-ipsum-wrapper #lorem-ipsum-main a {
  text-decoration: none;
  color: black;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn {
  float: left;
  padding: 5px 10px;
  text-align: center;
  min-width: 18px;
}
#lorem-ipsum-wrapper #lorem-ipsum-main > li:first-child {
  color: green;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn:nth-child(1) {
  border-radius: 5px 0 0 5px;
}
#lorem-ipsum-wrapper #lorem-ipsum-main > .main-btn:nth-last-child(2) {
  border-radius: 0 5px 5px 0;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn:hover {
  background: #d3d3d3;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  box-shadow: 1px 1px 3px 0px lightgray;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul li {
  padding: 4px;
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul li:hover {
  background: #EEEEEE;
}

<div id="lorem-ipsum-wrapper">
  <ul id="lorem-ipsum-main">
    <li id="btn-header-wrapper" class="main-btn">
      <a href="#" id="btn-T">T</a>
      <ul>
        <li>
          <a href="#" id="btn-T1">T1</a>
        </li>
        <li>
          <a href="#" id="btn-T2">T2</a>
        </li>
        <li>
          <a href="#" id="btn-T3">T3</a>
        </li>
        <li>
          <a href="#" id="btn-T4">T4</a>
        </li>
      </ul>
    </li>
    <li class="main-btn">
      <a href="#" id="btn-E"><b>E</b></a>
    </li>
    <li id="btn-justify-wrapper" class="main-btn">
      <a href="#" id="btn-gender">Gender</a>
      <ul>
        <li>
          <a href="#" id="btn-M">M</a>
        </li>
        <li>
          <a href="#" id="btn-F">F</a>
        </li>
        <li>
          <a href="#" id="btn-other">other</a>
        </li>
      </ul>
    </li>
    <li class="main-btn" id="btn-list-wrapper">
      <a href="#" id="btn-list">List</a>
      <ul>
        <li>
          <a href="#" id="btn-1list">List 1</a>
        </li>
        <li>
          <a href="#" id="btn-2list">List 2</a>
        </li>
      </ul>
    </li>
    <span class="clear_both"></span>
  </ul>
</div>

Answer 3

新想法：

（现在主菜单获取子菜单的宽度）

#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn {
  float: left;
  padding: 5px 10px;
  text-align: center;
  min-width: 18px;
  height: 17px; /*Max-height of the Top-Main-Btn*/
}
#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul {
  position: relative;
  background: white;
  box-shadow: 1px 1px 3px 0px lightgray;
  width: 100%; /*the sub UL has 100% width of it's parent */
}

以下是经过编辑的CodePen：http://codepen.io/anon/pen/avZdVR

旧想法：

我会这样做，改变这两个：

#lorem-ipsum-wrapper #lorem-ipsum-main li {
  list-style: none;
  position: relative; /*you need to be able to place the sub ULs*/
}

#lorem-ipsum-wrapper #lorem-ipsum-main .main-btn ul {
  position: absolute;
  background: white;
  box-shadow: 1px 1px 3px 0px lightgray;
  width: 90%; /*the sub UL has 90% width of it's parent */
  left: 5%; /*the space on the left and right side is 5% */
}

CodePen：http://codepen.io/anon/pen/KdMVeX

根据子菜单的内容

3 个答案: