CSS中如何把文本框和按钮放在一行内?

已经设置了float,为何text文本框在按钮下面
(text文本框宽度自适应)

<head><title>email页面</title><style type="text/css">
<!--
body{font-family:Arial;font-size:12px;text-align:center;}
.inner{overflow:hidden;}
.inner div{padding:1px;}
.iText input {width: 99%;}
.btn input{float:left;width:100px;padding:1px 10px;font-size:12px;border:1px solid;}
#formwrapper{width:98%;margin:15px auto;padding:20px;text-align:left;border:1px solid;}
fieldset{padding:10px;margin-top:5px;border:1px solid;}
fieldset legend{font-weight:bold;padding:3px 20px 3px 20px;border:1px solid;}
fieldset div{clear:left;margin-bottom:2px;}
-->
</style></head><body>
<div id="formwrapper">
<form id="formEmail" name="formEmail" method="post" action="#">
<fieldset><legend>收件人:</legend>
<div class="inner">
<div class="btn"><input type="button" name="emailAddPick" value="常用地址"></div>
<div class="iText"><input type="text" name="emailAdd"></div>
</div></fieldset></form></div></body></html>

  首先你的按钮和文本框都是在各自的div里,而不是同层,所以对他们设置float无效,要对他们外面那个div设置float。其次你怎么可以加fieldset div{clear:left;margin-bottom:2px;},这里的clear:left会让所以的div强制换行的。
  所以方法很简单,将fieldset div{clear:left;margin-bottom:2px;}改为
  fieldset div{float:left;margin-bottom:2px;}即可,即clear改为float即可。

附:input右边有些剪切,因为有padding:1px;,所以宽度99%太大,改小点比如95%即可。
温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-12-04
我们可以用一个div盒子将文本框和按钮包在一个盒子里面:
如:
<div>
<input type="text">
<button type="button">按钮</button>
</div>
然后给他们样式:
div{width:200px; height:30px;float:left}
input{width:135px;height:30px;float:left}
button{width:60px;height:30px;}
这样文本框和按钮就在一行内了,如果想好看一点可以给div一个边框样式,input和button不要给边框,看起来就好看多了
第2个回答  2013-04-09

因为宽度不够的时候浮动内容会自动换行。你的iText定义了宽度99%,btn的宽度应该是大于1%了,这个时候iText就会换行。

你试试看这样

<div>
<div style="width: 120px; position: absolute;">
<input type="button" />
</div>
<div style="margin-left: 120px;">
<input type="text" style="width: 100%;" />
</div>
</div>

第3个回答  2013-04-09
fieldset div{clear:left;margin-bottom:2px;}

改为fieldset div{float:left;margin-bottom:2px;}

解释:你的按钮和输入框都在各自的div里,所以设置float没用,要对div设置float。
第4个回答  2015-10-26
display:block
相似回答