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; 
     } 

이 BTW UL 인증 목록 절대적 위치해야합니다.

도 그 목록의 너비를 부모 크기로 설정하여 div 컨테이너 "중간"에 래퍼를 추가하려고했지만 didnt 작업을 시도했습니다.

UPDATE : 상대 : 내가이 일을하는 데

확인, 난 그냥 컨테이너를 만들고, 위치에 해당 컨테이너를 설정했다.

Answer 1

당신이 당신의 중간 부분이를 추가 할 수 있습니까? % 이상의 PX 하나의 폭을 설정하고, 상대 위치에 컨테이너를 설정함으로써

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

} 

, 당신은 두 요소의 크기를 동일한 상위베이스를 제공한다.

Answer 2

<ul> 요소에서 position:absolute을 제거하십시오. 절대 위치 지정은 요소를 정상적인 흐름에서 제거하고 부모 요소의 너비에 자동으로 맞지 않습니다.

은 또는 당신을위한 고정 폭을 설정할 수 모두 <input>과 <ul>

여기 jsfiddle 처음 수정 보여 포크의 : http://jsfiddle.net/27qeJ/

Answer 3

이 있으면 그냥 입력 요소와 목록 요소가 들어있는 div를 래핑하는 컨테이너 요소를 만들고 해당 래퍼를 position : relative로 설정하면됩니다.