使2个HTML输入字段与顶部的宽度相同[关闭]答案

【问题标题】：Make 2 HTML input fields same width as the one on top [closed]使2个HTML输入字段与顶部的宽度相同[关闭]
【发布时间】：2012-09-11 14:13:44
【问题描述】：

请看this little HTML form

我希望 ZIP 和城市输入字段位于一行，但右侧的城市输入字段以姓名输入字段结尾。

我怎么能这样做？谢谢。

【问题讨论】：

可以手动调整输入宽度吗？
你能更准确地描述你在寻找什么吗？
How to justify form input fields with css?的可能重复

标签： html css forms

【解决方案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 姓名邮编和城市

解决方案 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>

【讨论】：

感谢您的努力，但这看起来比创建 HTML 表格还要糟糕……我希望有另一种解决方案
好的，我添加了第二个解决方案。
再次感谢。但是，我在此处显示的链接中发现了其他一些看起来更优雅的解决方案...stackoverflow.com/questions/10965155/…
更优雅？ :D ok gr8 你应该在发布重复问题之前进行研究。不客气

【解决方案2】：

现在查看结果，链接如下-http://jsfiddle.net/HSkyq/4/

【讨论】：