Question

我想要从左到右的一排块，然后是下面的一个块。

这是我希望在浏览器中呈现的内容的图片。 Desired rendering of HTML

我需要通过CSS进行所有定位，而不是通过表进行定位。这是我的HTML和我的CSS ......

<!DOCTYPE html>
<html>
 <head><link rel="stylesheet" href="demo.css" /><head>

<body>

<form action="">
  <fieldset>
    <legend>Field set A</legend>
    <label for="password">Password
      <input id="password" name="password" type="text" value="my password" />
    </label>            
  </fieldset>               
  <fieldset class="radio">
    <legend>Chaining mode</legend>
      <label for="chain-cfb">
          <input id="chain-cfb" name="chain" type="radio" />CFB
      </label>
      <label for="chain-cbc">
          <input id="chain-cbc" name="chain" type="radio" />CBC
      </label>
  </fieldset>               
</form>

<hr />
<p style="padding-top: 1em;">Some text underneath</p>   
</body> 
</html>

...这里是demo.css的内容......

fieldset
{
    float: left;
    display: block;
    width: 17em;
    margin: 0 1em 1em 0;
    padding: 0 1em 1em 1em;
}

fieldset.radio input
{
    clear: both;
    float: left;
    width: auto;
}

input
{
    display: block;
    width: 15em;
}

label
{
    display: block;
    margin-bottom: 1em;
    font-weight: bold;
}

label.first
{
    padding-top: 1em;
}

我阅读它的方式应该是使用此代码获得所需的结果。但我不是。这就是渲染......

Actual rending of HTML

我需要对html / css进行哪些更改才能获得所需的结果？

Answer 1

你需要让<hr />元素清除浮点数。 hr { clear: left; }

Answer 2

没有清算的方式是：

form { overflow: hidden; }

我通常会创建一个名为floatbox的类，并在每个包含浮动元素

的容器上使用它

.floatbox { overflow: hidden; }

匹配的html然后是

<form class="floatbox" action="">
    <fieldset><p>I'm floating</p></fieldset>
    <fieldset><p>me too</p></fieldset>
</form>

Answer 3

添加：

hr {
    clear: left;
}

到您的样式表中清除您的花车。

Answer 4

你可以使用ole'虚拟清除元素技巧：

<form action="">
  <fieldset>
    <legend>Field set A</legend>
    <label for="password">Password
      <input id="password" name="password" type="text" value="my password" />
    </label>            
  </fieldset>               
  <fieldset class="radio">
    <legend>Chaining mode</legend>
      <label for="chain-cfb">
          <input id="chain-cfb" name="chain" type="radio" />CFB
      </label>
      <label for="chain-cbc">
          <input id="chain-cbc" name="chain" type="radio" />CBC
      </label>
  </fieldset> 
  <div style="clear:both"> </div>      
</form>

这可以确保您的表单实际占用的空间与其中的元素一样多。

简单地清除hr的问题是表单的宽度和高度为零，如果您还要在表单中应用样式，这可能会有问题。

CSS定位：左侧浮动一行，后面是一个块

4 个答案: