0

我有一个容器，它有两个固定大小的元素和一个流体大小的元素。当浏览器调整大小时，流体元素采用窗口的剩余大小，而其他两个保持固定。问题是，我有一个 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 容器“中间”添加一个包装器，但没有用。

更新：

好的，我让它工作，我只需要制作一个容器，并将该容器设置为位置：相对。

4

3 回答 3

1

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

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

}

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

于 2013-05-23T19:42:04.247 回答
0

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

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

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

于 2013-05-23T19:41:47.417 回答
0

明白了，只需创建一个容器元素来包装包含输入和列表元素的 div，并将该包装器设置为 position: relative。

于 2013-05-23T20:11:45.693 回答