Question

我有一个容器，它有两个固定大小的元素和一个流体大小的元素。调整浏览器大小时，流体元素将占用窗口的剩余大小，而其他两个保持固定。问题是，我在容器中的输入元素之后插入了一个ul。如何根据宽度将ul列表设置为输入元素的大小？

代码：

<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。

Answer 1

你能把它添加到你的中间部分吗？

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

}

通过在％或px中设置宽度，并将容器设置为相对位置，可以为两个元素提供相同的父级基础。

Answer 2

从position:absolute元素中删除<ul>。绝对定位将元素从正常流中取出，并且不会自动适合父元素的宽度。

或者，您可以为<input>和<ul>

设置固定宽度

这是你的jsfiddle分叉显示第一个修复：http://jsfiddle.net/27qeJ/

Answer 3

得到它，只需创建一个包含div的容器元素，其中包含input和list元素，并将该包装器设置为position：relative。

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

3 个答案: