0

2 つの固定サイズの要素と 1 つの流動サイズの要素を持つコンテナーがあります。ブラウザーのサイズが変更されると、fluid 要素はウィンドウの残りのサイズを使用し、他の 2 つの要素は固定されたままになります。問題は、コンテナー内の入力要素の後に挿入される 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 に設定する必要がありました。

4

3 に答える 3

0

position:absolute要素から を削除し<ul>ます。絶対配置では、要素が通常の流れから外れ、親要素の幅に自動的に収まりません。

<input>または、と の両方に固定幅を設定することもできます。<ul>

ここに、最初の修正を示すためにフォークされた jsfiddle があります: http://jsfiddle.net/27qeJ/

于 2013-05-23T19:41:47.417 に答える