如何实现这种格式化

时间：2015-01-28 22:43:13

标签： html css forms

我有一个我无法改变其HTML的表单。这个解决方案必须是纯css。

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

使用小提示打开缩小浏览器，直到帮助文本突破一行，如下图所示：

enter image description here

那些斜体帮助文本＆＃34;包＆＃34;和＆＃34;活跃＆＃34;正在打破，当他们这样做时，剩余部分一直跳到下一个可用空间，也就是整个线下面。我怎样才能让它们与自己对齐？换句话说，在＆＃34;包＆＃34;图像中的文字，＆＃34;如果＆＃34;应与＆＃34;关联。＆＃34;

我的第一直觉就是简单地给出那些跨度display: inline-block - 因为在我看来他们会在一个只有剩余空间宽的区块中 - 但是你可以将它插入小提琴并观察它失败。

反对小提琴的HTML和CSS：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

根据您在其他问题中的my answer，您可以添加

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：

中对此进行了解释
  

浮动是一个在当前向左或向右移动的框   线。浮动（或“浮动”或浮动）最有趣的特征   “浮动”框是指内容可以沿着它的边流动（或者是   禁止“清除”财产这样做。内容流下来   左侧浮动框的右侧，沿着左侧浮动框的右侧   右浮箱子。

请参阅以下示意图：

.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>

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

但诀窍是

  

表的边框，块级替换元素或   正常流程中的元素，用于建立新的块格式   上下文（例如'溢出'除'可见'之外的元素）必须   不与同一块格式中任何浮点数的边距框重叠   上下文作为元素本身。

然后，使用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>

相关问题
最新问题