如何仅使用CSS格式化此表单

Question

给出以下HTML代码段：

<form>  
    <p>
       <label for="id_name">Name:</label> 
       <input id="id_name" maxlength="40" name="name" type="text">
    </p>

    <p>
       <label for="id_format">Format:</label> 
       <select id="id_format" name="format">
          /*options*/
       </select>
       <span>This is a description of this item</span>
    </p>
</form>

是否可以将此表单设置为附加图片的样式： 单独使用css？我知道我可以将表格格式化为表格，但问题是这是否可以用css专门完成。

该代码段旨在显示语义。您可以根据代码段假设其他元素的html。标签位于标签标签中，输入为text，select，text-area和checkbox等。每个条目都位于<p>标记中。< / p>

获取所有相同宽度，颜色等的输入都没有问题。布局让我感到不安。我似乎无法定位和对齐所有输入，然后有标签和跨度＆＃34; flow＆＃34;他们周围。

是否可以不触及HTML？

Answer 1

对于结构，你可以这样做：

p label {
    display: inline-block;
    padding-right: 10px;
    text-align: right;
    width: 75px;
}

p span {
    padding-left: 10px;
}

最重要的部分是p label和display: inline-block;行。这允许标签显示为内联级块容器。该块的内部格式为块级框，元素本身被格式化为内联级框。

请注意，padding值可以根据您需要的方式进行调整或删除。 width值也是如此。

Answer 2

问题是您希望表单控件在它们之前的label元素的宽度上独立对齐。

您可以轻松地为所有label s设置固定宽度。

然而，流畅的表格方法可能更有趣。

但您不希望在同一列中对齐span。要修复它，可以在它们之前浮动表单控件。

form {
  display: table;
  width: 100%;
}
form > p {
  display: table-row;
}
form > p > label {
  display: table-cell;
  text-align: right;
  vertical-align: top;
  width: 0; /* Minimum width */
}
form > p > input[type="checkbox"] {
  float: left; /* To avoid aligning `span` in a column */
}
form > p > select,
form > p > textarea,
form > p > input[type="text"] {
  width: 300px; /* Same width for all */
  box-sizing: border-box; /* Fix width issues */
}
form > p > span {
  font-style: italic;
  font-size: 80%;
}

form {
  display: table;
  width: 100%;
}
form > p {
  display: table-row;
}
form > p > label {
  display: table-cell;
  text-align: right;
  vertical-align: top;
  width: 0;
}
form > p > input[type="checkbox"] {
  float: left;
}
form > p > select,
form > p > textarea,
form > p > input[type="text"] {
  width: 300px;
  box-sizing: border-box;
}
form > p > span {
  font-style: italic;
  font-size: 80%;
}

<form>
  <p>
    <label for="id_name">Name:</label>
    <input id="id_name" maxlength="40" name="name" type="text" />
  </p>
  <p>
    <label for="id_format">Format:</label>
    <select id="id_format" name="format"></select>
  </p>
  <p>
    <label for="id_type">Type:</label>
    <select id="id_type" name="type"></select>
  </p>
  <p>
    <label for="id_packs">Packs:</label>
    <select id="id_packs" name="packs"></select>
    <span>If Block, Sealed, or draft, note the associated packs/block</span>
  </p>
  <p>
    <label for="id_decklist">Decklist:</label>
    <textarea id="id_decklist" name="decklist"></textarea>
  </p>
  <p>
    <label for="id_inactive">Inactive:</label>
    <input type="checkbox" id="id_inactive" name="inactive" />
    <span>Check to hide from All Active Decks view and Registration Sector</span>
  </p>
</form>