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

クリアしない方法は次のとおりです。

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 に答える
2

<hr />要素にフロートをクリアさせる必要があります。hr { clear: left; }

于 2012-11-29T12:32:31.287 に答える
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 に答える