0

私は単純な 2 列のレイアウトを持っています (左の列は固定幅 200px、右の列は 100% 拡張します)。

右の列の最初の要素がPすべての要素であれば問題ありません。

ただし、右列の最初の要素がINPUT要素 ( width:100%) の場合は、下に移動します。

表示される結果は以下のとおりです (Chrome、FF、IE でテスト済み):

ここに画像の説明を入力

INPUT フィールドが次の行に移動するのに、P 要素が移動しない理由を説明していただけますか? そして、これを修正する方法は？

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title></title>
   <style type="text/css">
      body {background-color: #eeeeee;}
      div.left {float:left; width:200px; border:1px solid #ff0000;}
      div.right {     margin-left:200px; border:1px solid #00ff00;}            
      div.right p, div.right input {width:100%; border:1px dashed #0000ff;}
   </style>
</head>
<body>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <p>I'm a P 100% width inside right div</p>
      </div>
   </div>

   <br>

   <div>
      <div class="left">
         <p>left div</p>
      </div>
      <div class="right">
         <input name="name" type="text" value="I'm an INPUT 100% width inside right div, why i'm down???">
      </div>
   </div>

</body>
</html>
4

2 に答える 2

2

CSSmargin-leftでは、境界線の1pxのサイズを数えずに、右側のdivタグにを与えています。

私はこのCSSを使ってあなたの例を自分で試しました：

<style type="text/css">
  body {background-color: #eeeeee;}
  div.left {float:left; width:200px; border:1px solid #ff0000;}
  div.right {margin-left:202px; border:1px solid #00ff00;}            
  div.right p {width:100%; border:1px dashed #0000ff;}
  div.right input {width:100%; border:1px dashed #0000ff;}
</style>

そのオフセットに対応するためのスペースを提供します。

inputこれで、ブロックではなくインラインとして表示されるため、最初の右のdivタグのようには見えませんが、CSSでこの変更を行うことができます。

于 2011-03-24T18:58:03.387 に答える
1

なぜそれがそのように処理されているのか正確にはわかりませんが、問題を修正するため<input>に aで囲むことができます。<p>

<div class="right">
         <p><input name="name" type="text" value="I'm an INPUT 100% width inside right div, why i'm down???" /></p>
</div>
于 2011-03-24T18:14:25.970 に答える