입력 크기에 ul을 맞추기

Question

다음과 같은 마크 업이 있습니다 (이것은 대략적인 추정이지만 잘 수행 할 것입니다). http://jsfiddle.net/6UxRU/1/

<fieldset> 
<div class="parent"> 
    <input id="inpt" type="text" /> 
    <ul class="checkboxgroup"> 
     <li> 
      <label> 
       <input type="checkbox" />Dominican Republic</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />Equatorial Guinea</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />Egypt</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />French Southern Territories</label> 
     </li> 
    </ul> 
</div> 
</fieldset> 

내가 ul 폭이 입력 (심지어 입력의 폭 변경)의 너비에 맞게 만들 수있는 방법이 있습니까? 또한 두 요소가 부모 위치를 200px로 만드는 것 외에 항상 현재 위치에 있도록 강제하는 더 좋은 방법이 있습니까?

Answer 1

이 제품을 찾고 계 시나요? http://jsfiddle.net/6UxRU/4/ 코드가 향상 될 수 있지만 이것이 원하는 최종 결과인지 알아 내려고합니다.

<fieldset> 
<div class="parent"> 
    <input id="inpt" type="text"/> 
    <ul class="checkboxgroup"> 
     <li> 
      <label> 
       <input type="checkbox" />Dominican Republic</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />Equatorial Guinea</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />Egypt</label> 
     </li> 
     <li> 
      <label> 
       <input type="checkbox" />French Southern Territories</label> 
     </li> 
    </ul> 
</div> 
</fieldset> 

.checkboxgroup { 
    border: 1px solid #999999; 
    background: yellow; 
    height: 150px; 
    float: left; 
    margin: 0; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    padding: 5px; 
    clear: both; 
    list-style-type: none; 
    z-index: 1; 
} 
li { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: x-small; 
    display: table-row; 
} 
.checkboxgroup label { 
    float: left; 
    word-break: normal; 
    /*margin-left: 10px;*/ 
} 

.parent{ 
    background-color: green; 
    overflow:hidden; 
    display :inline-block; 
} 

#inpt{ 
    display:block; 
    width:100%;   
}