0

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

这是我希望在浏览器中看到的图片。 所需的 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;
}

我阅读它的方式应该是使用此代码获得所需的结果。但我不是。这是呈现的内容......

HTML的实际呈现

为了获得预期的结果，我需要对我的 html/css 进行哪些更改？

4

4 回答 4

2

您需要使<hr />元素清除浮动。hr { clear: left; }

于 2012-11-29T12:32:31.287 回答
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>
于 2012-11-29T12:34:10.663 回答
1

添加：

hr {
    clear: left;
}

到您的样式表以清除您的浮动。

于 2012-11-29T12:31:51.373 回答
1

您可以使用 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是表单的宽度和高度为零，如果您也将样式应用于表单，这可能会出现问题。

于 2012-11-29T12:32:11.043 回答