適合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%;   
}