绝对大小 child 到 parent 宽度

Question

我正在尝试使 child 弹出窗口的大小与 parent 的大小相同，但似乎做不到。这就是我目前拥有的（绝对不能使用固定宽度）。

html

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li> <!-- this parent -->
    <a href="#">Items</a>
    <div class="dropdown-content" style="display: block;"> <!-- this child -->
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

css

.navmenu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    width: 150px;
}

.navmenu .dropdown-content a {
    color: black;
   padding: 6px 0px;
}

我试过将宽度更改为

width: 100%;

和

left: 0px;
right: 0px;

但是元素采用 window 而不是 parent 的大小。这是我目前拥有的 fiddle：http://jsfiddle.net/aywmn3zt/10/.

Answer 1

将 position: relative 添加到父级 li，然后将 width: 100% 添加到下拉列表，它工作正常。

.navmenu li{
  position: relative;
}

ul {
  display: table
}

ul li {
  display: table-cell;
  width: 1%
}

ul li a {
  text-align: center;
  border: 0 none;
  font-weight: normal;
  padding: 10px 15px
}

ul {
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  color: #fff
}

ul {
  margin: 0;
  text-align: left;
  width: 100%
}

ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap
}

ul li a:focus,
ul li a:hover {
  background-color: #006bdc;
  color: #fff;
  text-decoration: none
}

ul .active a,
ul .active a:hover,
ul .active a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  font-weight: bold
}

.navmenu {
  margin-left: 0;
  margin-bottom: 1.5em;
  list-style: none
}

.navmenu li a {
  display: block
}

.navmenu li a:hover,
.navmenu li a:focus {
  background-color: #ebf3f4
}

.navmenu ul {
  list-style: none;
  margin-left: 0
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 150px;
  width: 100%;
}

.navmenu li{
  position: relative;
}

.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

Answer 2

将父 li 设置为 position:relative。 position absolute child 相对于其最近的位置 relative parent 定位。

ul {
  display: table
}

ul li {
  display: table-cell;
  width: 1%;
  position: relative;
}

ul li a {
  text-align: center;
  border: 0 none;
  font-weight: normal;
  padding: 10px 15px
}

ul {
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  color: #fff
}

ul {
  margin: 0;
  text-align: left;
  width: 100%
}

ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap
}

ul li a:focus,
ul li a:hover {
  background-color: #006bdc;
  color: #fff;
  text-decoration: none
}

ul .active a,
ul .active a:hover,
ul .active a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  font-weight: bold
}

.navmenu {
  margin-left: 0;
  margin-bottom: 1.5em;
  list-style: none
}

.navmenu li a {
  display: block
}

.navmenu li a:hover,
.navmenu li a:focus {
  background-color: #ebf3f4
}

.navmenu ul {
  list-style: none;
  margin-left: 0
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 100%;
  
  /*left: 0px;
  right: 0px;*/
}

.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a></li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a></li>
</ul>

Answer 3

将 position: relative 添加到 li 和 width: 100% to.navmenu .dropdown-content`。

注意：你的代码有重复的样式，检查整理一下

这是一个工作示例：

ul.navmenu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  min-height: 29px;
  width: 100%;
  background-color: #0054ae;
  margin-bottom: 1.5em;
}
ul.navmenu li {
  display: table-cell;
  position: relative;
}
ul.navmenu li a {
  display: block;
  text-align: center;
  border: none;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #004d9f;
  padding: 13px 20px;
  font-weight: bold;
  white-space: nowrap;
}
ul.navmenu li a:focus,
ul.navmenu li a:hover {
  background-color: #006bdc;
}
ul.navmenu li.active a {
  background-color: #004185;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
}
ul.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 100%;
}
ul.navmenu .dropdown-content a {
  color: black;
  padding: 6px 0px;
}

<ul class="navmenu">
  <li class="active current"><a href="/">Home</a>
  </li>
  <li><a href="#">Items</a>
    <div class="dropdown-content" style="display: block;">
      <a id="9" href="#">items 1</a>
      <a id="10" href="#">item 50</a>
      <a id="11" href="#">item long name</a>
    </div>
  </li>
  <li><a href="/Home/Contact">Contact</a>
  </li>
</ul>

Answer 4

DEMO

css

ul li {
  display: table-cell;
  width: 1%;
  position:relative /* make it relative so that absolute positioned children of it will be placed wrt li */
}

.navmenu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /*width: 150px;*/
  left: 0px; /* make it to left */
  right: 0px; /* to right this will help to take the width of its parent */
}

绝对大小 child 到 parent 宽度

Size absolute child to parent width

html

css

drop-down-menu

css-position

css-tables