Question

我被困在浮动问题上一段时间，所以我希望社区可以再次帮助我。我有一个新的网络表单here。像往常一样，除了IE7（或IE8的兼容性）外，它看起来都很好。

由于某些原因，某些容器最终会在表单文本下方的新行上以表单字段结束。 CSS不是我的强项，否则我能够解决这个问题我肯定。谁能告诉我这里缺少什么？

我尝试将float：left添加到表单文本中，但结果却是另一个混乱。

Answer 1

尝试小改变标记：在没有它的项目之前放置具有浮动的项目（来自同一行）。它应该有所帮助。

Answer 2

我知道自发布以来已经很长时间了，但我找到了一个我喜欢的解决方案。要点是在CSS中为IE7使用'expression'标签，只是将浮动元素移动到DOM中父元素的第一个元素。对于所有其他浏览器，它在语义上是正确的，但对于IE7，我们修改DOM以移动浮动元素。

就我而言，我有：

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

在我的CSS for pull-right中，我使用：

.pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

结果是IE7将<small>移动为<div>的第一个元素，但所有其他浏览器都单独留下标记。

这可能对每个人都不起作用。从技术上讲，它正在修改标记，但仅限于IE7的DOM，它也是一个javascript解决方案。

另外，我知道表达式可能存在一些性能问题（速度很慢），所以也许它不是很理想，有很多这样的浮点数。就我而言，它运作良好，并允许我保持语义正确的HTML。

Answer 3

如果你向左移动.formText，向左浮动你的span.required，然后向左浮动你的输入，你应该能够将它们排成一行。

我会稍微修改你的标记。您的<span class="formText">应该是<label>

例如：

<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P>

你的css会是这样的：

.formRow {
  clear: both;
}
  .formRow label {
     float: left;
     width: 150px;
  }
  .formRow input {
     float: left;
  }

Answer 4

您可以尝试将文本的span标签设置为固定宽度，将它们向左浮动，并对要与之对应的输入字段执行相同操作。我还建议在表单上使用标签标签而不是span标签。没有真正可靠的理由，只是标签的确是为了你的span标签所做的。

Answer 5

你想要做的是添加一个明确的：作为浮动元素的最后一个兄弟。

类似于：

<div style="float:left;">
  <!-- children of div here -->
</div>
<div style="clear:both;">
  <!-- leave empty -->
</div>

float：在IE7中直接换到新行

5 个答案: