列的 CSS “display: table-cell” - 使第一列的宽度与最宽的单词相同

Question

我有几种不同的表单，它们使用显示：表格单元格，如在这个小提琴 http://jsfiddle.net/leopardy/ysyf33mq/的一个表单的例子中看到

的

我希望第一列(充当标签的列(是最长文本的宽度，在本例中为文本确认密码。因此，所有带有标签文本用户名，电子邮件，公司和密码的"框"应与"确认密码"框的宽度相同。

所有这些文本都应该是静态的，因此如果我可以将列设置为特定宽度并在文本更改时稍后手动更改它就足够了。但是，如果宽度可以自行调整，这样如果我将来更改文本，第一列中所有项目的宽度都会自动调整，那就更好了。我已经尝试了很多东西，我什至记不住它们，但是我确实在 CSS 中留下了一个注释掉的样式，以说明我尝试过的内容。

.HTML：

<div class="entry-group">
    <span class="label-group">Username</span>
    <input id="new_username" type="text" class="form-control" />
  </div>
  <div class="entry-group">
    <span class="label-group">Email</span>
    <input id="email_address" type="text" class="form-control" />
  </div>
  <div class="entry-group">
    <span class="label-group">Company</span>
    <input id="company" type="text" class="form-control" />
  </div>
  <div class="entry-group">
    <span class="label-group">Password</span>
    <input id="new_password" type="password" class="form-control" />
  </div>
  <div class="entry-group">
    <span class="label-group">Confirm Password</span>
    <input id="confirm_password" type="password" class="form-control" />
  </div>
  <div id="terms">
    <label><input id="terms_checkbox" type="checkbox" />I agree to the <a href="something.html" target="_blank">Terms of Service</a></label>
  </div>

.CSS：

.entry-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.entry-group .form-control {
  width: 100%;
  margin-bottom: 0;
}
.label-group,
.entry-group .form-control {
  display: table-cell;
}
.label-group {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
/* .label-group.col {
    width: 20px;
} */
.form-control {
  display: block;
  height: 24px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

Answer 1

试试这个JSFiddle。您的表结构几乎已完成，因此这里有一些小的调整来创建所需的表行。有一个新的包装器div 称为 .table-style 与 display:table .由于您已经有了表结构，因此我在 .entry-group 上使用了display:table-row。 Display:table-cell 仍然用于 .label-group 和 .form-control。

.table-style {
    display:table;
}
.entry-group {
  display:table-row;
}

.label-group, .form-control {
  display: table-cell;
}

注意：如果您对输入标签上的表格单元格有疑问，您可能需要阅读此堆栈溢出问题。