CSS: input field (width 100%) goes next line on simple 2 cols layout

问题

I have a simple 2 cols layout (left col fixed width 200px, and right col expand 100%).

If the 1st element of the right col is a P element everything it's ok.

But when the 1st element of the right col is an INPUT element (width:100%), it goes down.

The result displaied is below (tested on Chrome, FF, IE):

Could you explain me why the INPUT field goes next line whilest the P element does NOT? And how to fix this?

The code is here:

<!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>

回答1:

On your CSS you are giving a margin-left to your right div tag without counting your borders' 1px of size.

I tried your example on my own with this 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>

giving space to accommodate that offset.

Now It won't look like the first right div tag because input is dispalyed as inline instead of block, but you can make this change on the CSS.

回答2:

I'm not sure why exactly it is handling it that way, but you can enclose your <input> in a <p> in order to correct the issue.

<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>

来源：https://stackoverflow.com/questions/5423485/css-input-field-width-100-goes-next-line-on-simple-2-cols-layout

标签

css

input-field

two-column-layout