如何实现这种格式

Question

我有一张表格，HTML 我无法更改。此解决方案必须是纯净的 css.

我在这里为这个问题创建了一个 jsfiddle：http://jsfiddle.net/oewf0x04/1/

打开 fiddle 缩小浏览器，直到帮助文本换行，如下图所示：

"packs" 和 "is active" 上的那些斜体帮助文本正在中断，当它们中断时，其余部分会一直跳到下一个可用的 space，也就是整行下方.我怎样才能使他们与自己保持一致？换句话说，对于图像中的 "packs" 文本，"If" 应该与 "associated."

对齐

我的第一直觉是简单地给出这些跨度 display: inline-block - 因为在我看来，它们将位于一个仅与剩余 space 一样宽的块中 - 但你可以将其插入进入 fiddle 并观察它失败。

HTML 和 CSS 表示 fiddle-厌恶：

form p {
  padding: 8px 0px 8px 0px;
}
form td {
  padding: 8px 0px 8px 0px;
}
label {
  display: inline-block;
  padding-right: 10px;
  text-align: right;
  width: 125px;
}
input,
select,
textarea {
  box-sizing: content-box;
  padding: 5px;
  width: 300px;
  border: 1px solid #DD660E;
  background-color: #fffae7;
}
form span {
  font-size: .75em;
  font-style: italic;
}
/*submit buttons*/

form > input:last-child {
  width: 100px;
}
#id_is_active {
  width: 20px !important;
}

<form action="/deck/bg-dredge/" method="post">
  <p>
    <label for="id_name">Name:</label>
    <input id="id_name" maxlength="40" name="name" type="text" value="BG Dredge">
  </p>
  <p>
    <label for="id_format">Format:</label>
    <select id="id_format" name="format">
      <option value="MODERN" selected="selected">Modern</option>
      <option value="STANDARD">Standard</option>
      <option value="LEGACY">Legacy</option>
      <option value="VINTAGE">Vintage</option>
      <option value="BLOCK">Block</option>
    </select>
  </p>
  <p>
    <label for="id_type">Type:</label>
    <select id="id_type" name="type">
      <option value="CONSTRUCTED" selected="selected">Constructed</option>
      <option value="DRAFT">Draft</option>
      <option value="SEALED">Sealed</option>
      <option value="COMMANDER">Commander</option>
    </select>
  </p>
  <p>
    <label for="id_packs">Packs:</label>
    <input id="id_packs" maxlength="20" name="packs" type="text" value="Unlimited"> <span class="helptext">If Block, Sealed, or Draft, note the associated packs/block</span>

  </p>
  <p>
    <label for="id_deck_list">Deck list:</label>
    <textarea cols="40" id="id_deck_list" name="deck_list" rows="10"></textarea>
  </p>
  <p>
    <label for="id_is_active">Is active:</label>
    <input checked="checked" id="id_is_active" name="is_active" type="checkbox"> <span class="helptext">Check to hide deck from your All Active Decks view and Registration Selector.  Useful for "hiding" old or one-time limited decks.</span>

  </p>
  <input type="submit" value="Update Deck">
</form>

Answer 1

根据你另一个问题中的，你可以添加

form > p > select,
form > p > textarea,
form > p > input {
  float: left;
}
form > p > span {
  display: block;
  overflow: hidden;
}

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;
  float: left;
}
form > p > span {
  font-style: italic;
  font-size: 80%;
  display: block;
  overflow: hidden;
}

<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 deck from your All Active Decks view and Registration Selector.  Useful for "hiding" old or one-time limited decks.</span>
  </p>
</form>

同样，在您当前的代码中，您可以添加

form p {
  overflow: hidden;
}
label,
input, select, textarea {
  float: left;
}
form span {
  display: block;
  overflow: hidden;
}

form p {
  padding: 8px 0px 8px 0px;
  overflow: hidden;
}
form td {
  padding: 8px 0px 8px 0px;
}
label {
  padding-right: 10px;
  text-align: right;
  width: 125px;
  float: left;
}
input,
select,
textarea {
  box-sizing: content-box;
  padding: 5px;
  width: 300px;
  border: 1px solid #DD660E;
  background-color: #fffae7;
  float: left;
}
form span {
  font-size: .75em;
  font-style: italic;
  display: block;
  overflow: hidden;
}
/*submit buttons*/

form > input:last-child {
  width: 100px;
}
#id_is_active {
  width: 20px !important;
}

<form action="/deck/bg-dredge/" method="post">
  <p>
    <label for="id_name">Name:</label>
    <input id="id_name" maxlength="40" name="name" type="text" value="BG Dredge">
  </p>
  <p>
    <label for="id_format">Format:</label>
    <select id="id_format" name="format">
      <option value="MODERN" selected="selected">Modern</option>
      <option value="STANDARD">Standard</option>
      <option value="LEGACY">Legacy</option>
      <option value="VINTAGE">Vintage</option>
      <option value="BLOCK">Block</option>
    </select>
  </p>
  <p>
    <label for="id_type">Type:</label>
    <select id="id_type" name="type">
      <option value="CONSTRUCTED" selected="selected">Constructed</option>
      <option value="DRAFT">Draft</option>
      <option value="SEALED">Sealed</option>
      <option value="COMMANDER">Commander</option>
    </select>
  </p>
  <p>
    <label for="id_packs">Packs:</label>
    <input id="id_packs" maxlength="20" name="packs" type="text" value="Unlimited"> <span class="helptext">If Block, Sealed, or Draft, note the associated packs/block</span>

  </p>
  <p>
    <label for="id_deck_list">Deck list:</label>
    <textarea cols="40" id="id_deck_list" name="deck_list" rows="10"></textarea>
  </p>
  <p>
    <label for="id_is_active">Is active:</label>
    <input checked="checked" id="id_is_active" name="is_active" type="checkbox"> <span class="helptext">Check to hide deck from your All Active Decks view and Registration Selector.  Useful for "hiding" old or one-time limited decks.</span>

  </p>
  <input type="submit" value="Update Deck">
</form>

该解决方案使用 float: left 使 span 沿着 label 和表单控件的右侧流动。

这在 spec 中有解释：

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

参见下面的示意图示例：

.wrapper {
  font-size: 2em;
  line-height: 1.5em;
  border: 5px solid;
}
.float1 {
  float: left;
  height: 4em;
  background: green;
}
.float2 {
  float: left;
  height: 1.5em;
  background: red;
}
.block {
  display: block;
  height: 3em;
  background: blue;
}

<div class="wrapper">
  <div class="float1">Float 1</div>
  <div class="float2">Float 2</div>
  <div class="block">Block<br />Block</div>
</div>

然而，这与您想要避免的当前情况非常相似！

但诀窍是

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

然后，使用overflow: hidden，现在我们有

.wrapper {
  font-size: 2em;
  line-height: 1.5em;
  border: 5px solid;
}
.float1 {
  float: left;
  height: 4em;
  background: green;
}
.float2 {
  float: left;
  height: 1.5em;
  background: red;
}
.block {
  display: block;
  height: 3em;
  overflow: hidden;
  background: blue;
}

<div class="wrapper">
  <div class="float1">Float 1</div>
  <div class="float2">Float 2</div>
  <div class="block">Block<br />Block</div>
</div>

但是等等！如果任何浮动元素比沿其一侧流动的元素高，它们将溢出父元素！

为避免这种情况，我们必须清除浮动。一种方法是将 overflow: hidden 添加到父级。

最后，我们得到了想要的行为：

.wrapper {
  font-size: 2em;
  line-height: 1.5em;
  overflow: hidden;
  border: 5px solid;
}
.float1 {
  float: left;
  height: 4em;
  background: green;
}
.float2 {
  float: left;
  height: 1.5em;
  background: red;
}
.block {
  display: block;
  height: 3em;
  overflow: hidden;
  background: blue;
}

<div class="wrapper">
  <div class="float1">Float 1</div>
  <div class="float2">Float 2</div>
  <div class="block">Block<br />Block</div>
</div>

如何实现这种格式

How to achieve this formatting

html

css

forms