使2 HTML輸入字段寬度相同之上

Question

了一個請參閱this little HTML form

我想有一個行ZIP &城市輸入字段，而右邊有一個同名的城市輸入字段結束輸入字段在一行上。

我該怎麼做？謝謝。

Answer 1

現在檢查的結果，鏈接如下 - http://jsfiddle.net/HSkyq/4/

Answer 2

解決方案1： http://jsfiddle.net/wMUAK/

CSS

label { 
    float: left; 
    width: 100px; 
    padding: 2px; 
} 

.c1 { 
    float: left; 
    width: 200px; 
} 

.c2 { 
    float: left; 
    width: 40px; 
    margin-right: 10px; 
} 

.c3 { 
    float: left; 
    width: 150px; 
} 

.c1 input[type=text], 
.c2 input[type=text], 
.c3 input[type=text] { 
    width: 100%; 
} 

.clear { 
    clear: both; 
} 

HTML 名稱 ZIP和城市

解決方案2： http://jsfiddle.net/HSkyq/5/

CSS

.table { 
    display: table; 
} 

.table .row { 
    display: table-row; 
} 

.table .cell { 
    display: table-cell; 
} 

.group { 
    display: table; 
    width: 100%; 
} 

.group .gcell { 
    display: table-cell; 
} 

.table input { 
    width: 100%; 
}​ 

HTML

<div class="table" style="width: 300px;"> 
    <div class="row"> 
    <div class="cell" style="width:40%;"> 
     <label for="name">Name</label> 
    </div> 
    <div class="cell"> 
     <input type="text" id="name" name="name" /> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="cell"> 
     <label for="city">ZIP and city</label> 
    </div> 
    <div class="cell"> 
     <div class="group"> 
     <div class="gcell" style="width: 40%;"> 
      <input type="text" name="zip" style="width: 90%;" /> 
     </div> 
     <div class="gcell"> 
      <input type="text" name="city" id="city" /> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>​