0

我有一个简单的 2 列布局（左列固定宽度 200 像素，右列扩展 100%）。

如果正确 col 的第一个元素是一个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

在您的 CSS 上，您在margin-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>

留出空间来容纳该偏移量。

现在它看起来不像第一个正确的 div 标签，因为input它显示为内联而不是块，但您可以在 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 回答