html - 2 つの HTML 入力フィールドを上のフィールドと同じ幅にする

Question

この小さな HTML フォームをご覧ください

ZIP と都市の入力フィールドを 1 行に配置したいのですが、右側の都市の入力フィールドの最後に名前の入力フィールドを 1 行に配置します。

どうすればそれができますか？ありがとう。

Answer 1

解決策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>​

Answer 2

結果を確認してください。リンクは次のとおりです - http://jsfiddle.net/HSkyq/4/