css - 如何使 ul 列表的宽度与输入元素的大小相同？

Question

我有一个容器，其中包含两个固定大小的元素和一个可变大小的元素。调整浏览器大小时，流体元素占据窗口的剩余大小，而其他两个元素保持不变。问题是，我有一个 ul 被插入到容器中的输入元素之后。如何使 ul 列表的宽度与输入元素的大小相同？

jsfiddle:http://jsfiddle.net/vR7E8/

代码:

<div class="wrap">
  <div class="left">
  </div>

  <div class="middle">
    <input class="my_input" />
    <ul class="my_list">
      <li> list one</li>
      <li> two </li>
      <li> three </li>
      <li> four </li>
    </ul>
  </div>

  <div class="right">
  </div>
</div>

CSS:

.wrap
{
    display: block;
     width: 100%;
     height: 100px;
     background: yellow;
     padding-left: 40px;
     padding-right: 50px;
     position: relative;
}

   .left
   {
      display: inline;
       width: 30px;
       height: 100px;
       background: blue;
   }

     input.my_input
     {

        width: 100%;
        height: 100px;
        display:inline-block;
       }

      .right
      {
        display: inline;
        background: green;
        width: 40px;
        height: 100px;
      }

     .my_list
     {
      list-style: none;
       padding: 0;
       margin: 0;
       position: absolute;
        width: 100%;
       border: 1px solid black;
        }

顺便说一句，ul 列表需要绝对定位，因为我不希望它移动它下面的内容。

此外，它将列表的宽度设置为父级的大小，所以我尝试向 div 容器“中间”添加一个包装器，但没有成功。

更新:

好的，我让它工作了，我只需要制作一个容器，并将该容器设置为 position: relative。

Answer 1

你能把这个加到你的中间部分吗？

.middle {
    position: relative;
    width: 200px;

}

通过以 % 或 px 为单位设置宽度，并将容器设置为相对位置，您可以为两个元素提供相同的父基来确定大小。