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

我有一个包含两个固定大小的元素和一个流体大小的元素的容器。调整浏览器大小时，流体元素将占据窗口的剩余大小，而其他两个保持固定。问题是，我在容器中的输入元素后插入了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容器“中间”，但没有起作用。

更新：

好的，我可以使用它，我只需要制作一个容器，然后将该容器设置为相对位置即可。

最佳答案

您可以将此添加到中间部分吗？

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

}

通过以％或px设置宽度，并将容器设置为相对位置，可以使两个元素具有相同的父基大小。

关于css - 如何使ul列表的宽度与输入元素的宽度相同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16722413/