0

我有一个动态生成的表单，可以在除 IE6 和 7 之外的所有我测试过的浏览器中正常显示。我的标题应该能够放置在表单输入的上方或侧面。对于单选按钮和复选框，我希望控件位于标签的左侧，对于所有其他输入，我希望控件位于右侧。两者的 HTML 应该相同，只有 CSS 应该改变。

() 收音机 1 () 收音机 2
[] 复选框 1 [] 复选框 2
正文 |____________|
等等

或者

收音机 1 收音机 2
() ()
复选框 1 复选框 2
[] []
文本
|____________|
等等

到目前为止我有

<span class="control">
  <label for="a1" class="forbutton">A1</label>
  <input type="checkbox" id="a1" class="form-input-checkbox" name="a" value="1"/>
</span>

或每个输入的类似内容。CSS是

.forbutton {
  margin-bottom: 0.20em;
  float: right;
}
.control {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
}

/* Only if you want labels above inputs */
.form-input-checkbox,
.form-input-radio {
  display: block;
  clear: both;
}

在 IE6 和 7 中，<span> 最终是 100% 宽度，而不是采用其内容的宽度（与其他浏览器一样，包括 IE8）。我怎样才能轻松解决这个问题？但是，如果我给跨度一个宽度，它确实可以修复它，但是我不知道它应该有多宽，因为标签是动态生成的。

目标： 在 HTML 代码中输入之前的
有效 HTML
有效 CSS标签 上面的标签和侧面的标签相同的 HTML 代码

任何达到相同结果的解决方案都将被欣然接受！

4

1 回答 1

0

我建议在那个跨度上去掉“display:inline-block”。IE7及更早的版本看不懂。此外，在此示例中，您在该元素上拥有的其他样式并不真正保证使用 inline-block。Span 默认情况下是内联的，我会保持这种状态。

于 2012-08-23T06:42:51.753 回答