Question

我有几种不同的形式，使用display来设置样式：table-cell，例如在这个小提琴中的一个表单的一个示例中看到http://jsfiddle.net/leopardy/ysyf33mq/

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

所有这些文本应该是静态的，所以如果我可以将列设置为特定宽度并在文本更改后手动更改它就足够了。但是，如果宽度会自我调整会更好，这样如果我将来更改文本，第一列中所有项目的宽度将自动调整。我已经尝试了很多我甚至不能记住它们的东西，但是我确实在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

Try this JSFiddle。您的表结构几乎已完成，因此这里有一些小的调整来创建所需的表行。有一个名为.table-style的新包装div与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;
}

注意：如果您在输入标记上遇到表格单元格问题，则可能需要阅读此Stack Overflow question.

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

1 个答案: