CSS中如何把文本框和按钮放在一行内？
已经设置了float，为何text文本框在按钮下面（text文本框宽度自适应）<head><title>email页面</title><styletype="text/c...
已经设置了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> 展开
（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%即可。
所以方法很简单，将fieldset div{clear:left;margin-bottom:2px;}改为
fieldset div{float:left;margin-bottom:2px;}即可，即clear改为float即可。
附：input右边有些剪切，因为有padding:1px;，所以宽度99%太大，改小点比如95%即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我们可以用一个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不要给边框，看起来就好看多了
如：
<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不要给边框，看起来就好看多了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为宽度不够的时候浮动内容会自动换行。你的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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
fieldset div{clear:left;margin-bottom:2px;}
改为fieldset div{float:left;margin-bottom:2px;}
解释：你的按钮和输入框都在各自的div里，所以设置float没用，要对div设置float。
改为fieldset div{float:left;margin-bottom:2px;}
解释：你的按钮和输入框都在各自的div里，所以设置float没用，要对div设置float。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
display:block
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
