Question

我正在尝试创建一个HTML表单，我正在向左移动标签，输入正确，现在在FF中工作正常并且在IE8中也是如此，但是当我转到IE7时，换行符似乎完全消失，我的元素之间没有空间，它可能是什么？

我该如何解决？

                <p>
                  <span class='left'><label for='gender'>Gender: </label></span>
                  <span class='right'><select name='gender' id='gender'>
                    <option>Select one</option>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                  </span>
                </p>
                <br />
                <p>
                  <span class='left'><label for='name'>Name: </label></span>
                  <span class='right'><input name='name' id='name' /></span>
                </p>
                <br />

现在由于某种原因，我在IE7的段落之间没有空格，即使我正在使用休息。

提前完成。

Answer 1

包含上述代码的元素是什么？尝试在clear: both;标记上设置<br/>，最好使用css类：

.clear { clear:both; }

<br class="clear" />

Answer 2

当你的第二段开始时，第一段仍在浮动。您需要clear:both;或clear:right;才能让您的休息时间有效。

.clearer { clear: both; }

<p class="right">hi</p>
<div class="clearer"></div>
<br />
<p>hi</p>

Answer 3

您的P标签只有浮动内容，因此没有高度

p标签的内容只有浮动标签和浮动输入，因此在IE中它们被视为零高度。除非您愿意在＆lt; p＆gt;上设置明确的高度，否则您可能无法找到针对此的跨浏览器修复程序。或者在其中添加非浮动元素。

我建议跳过＆lt; br＆gt;并且只是利用边距来完成工作。下面是一个例子，假设包装＆lt; div＆gt;你提到过。

CSS：

.left { float: left; }
.right { float: right; }
.wrap p { clear: both; height: 1em; margin: 0 0 1em 0; padding: 0; }
.wrap br { display: none; }

HTML：

<form>
<div class="wrap">

 <p>
  <span class='left'><label for='gender'>Gender: </label></span>
  <span class='right'>
   <select name='gender' id='gender'>
    <option>Select one</option>
    <option>Male</option>
    <option>Female</option>
   </select>
  </span>
 </p>
 <br />
 <p>
  <span class='left'><label for='name'>Name: </label></span>
  <span class='right'><input name='name' id='name' /></span>
 </p>
 <br />

</div>
</form>

IE浮动没有填充错误

3 个答案: