在不使用任何CSS库的情况下构建内联CSS

Question

我的表格如下。

我想对齐标签右侧的所有标签以及标签后的冒号也必须对齐（必须出现在同一垂直线上） 我不想使用任何CSS库，如Bootstrap等。

我现在得到如下：

Answer 1

你的问题不太清楚，但是你想要这样的东西吗？

＆＃13;

＆＃13;

.inputblock {
  display: inline-block;
  background:#f1f1f1;
  padding:1em;
}
.row {
  text-align: right;
  padding: 2px 0;
}
.row input, .row select {
  border-radius:.25em;
  width:20em;
  box-sizing:border-box;
}
   

＆＃13;

<div class="inputblock">
  <div class="row">
    <label for="firstname">First name:</label>
    <input name="firstname" id="firstname">
  </div>
  <div class="row">
    <label for="lastname">Last name:</label>
    <input name="lastname" id="lastname">
  </div>
  <div class="row">
    <label for="state">State:</label>
    <select id="state">
     <option>Australia</option>
    </select>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

#contact_form label {
    text-align: right;
    display: block;
}

<label>默认为内联

Answer 3

是的，可以试试这样

<div style="width:100%">
   <div style="width:20%; float:left;">
       <label>Name</label>
   </div>
   <div style="width:80%; float:left;">
      <input type="text">
   </div>
</div>