CSS：输入字段（宽度100％）在简单2 cols布局上下一行 [英] CSS: input field (width 100%) goes next line on simple 2 cols layout
问题描述
我有一个简单的2 cols布局（左col固定宽度200px，右col扩大100％）。
I have a simple 2 cols layout (left col fixed width 200px, and right col expand 100%).
如果右col的第一个元素是 P 元素一切正常。
If the 1st element of the right col is a P element everything it's ok.
但当右边第一个元素是 INPUT 元素（ width：100％），它会关闭。
But when the 1st element of the right col is an INPUT element (width:100%), it goes down.
显示的结果如下（在Chrome，FF，IE上测试）：
The result displaied is below (tested on Chrome, FF, IE):
你能解释一下INPUT字段为什么要下一行P元素
Could you explain me why the INPUT field goes next line whilest the P element does NOT? And how to fix this?
代码在这里：
<!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>
推荐答案
我试着用自己的例子做这个例子CSS：
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.
现在它看起来不像第一个右div标签，因为输入被显示为inline而不是block，但您可以在CSS上进行此更改。
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.
这篇关于CSS：输入字段（宽度100％）在简单2 cols布局上下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
