Question

我有一个简单的2 cols布局（左侧col固定宽度200px，右侧col扩展100％）。

如果右侧col的第一个元素是P元素，那么一切都可以。

但当右侧col的第一个元素是INPUT元素（width:100%）时，它会下降。

结果显示低于（在Chrome，FF，IE上测试）：

enter image description here

你能解释一下为什么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>

Answer 1

在你的CSS上，你正在给你的div标签margin-left，而不计算边框的1px大小。

我用这个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>

提供空间以适应该偏移。

现在它看起来不像第一个正确的div标签，因为input被显示为内联而不是块，但您可以在CSS上进行此更改。

Answer 2

我不确定为什么会这样处理它，但您可以将<input>括在<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>

CSS：输入字段（宽度100％）在简单的2 cols布局上接下来一行

2 个答案: