非常简单的自适应搜索表单实现

最新推荐文章于 2023-02-11 14:53:24 发布

weixin_33795833

最新推荐文章于 2023-02-11 14:53:24 发布

阅读量846

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tnnyang/p/5498889.html

版权

以前，我实现这个自适应的搜索表单，都是苦于一点一点的给input输入框设置宽度来达到和搜索按钮恰好在同一行且铺满屏幕的实现方法，结果做下来在不同大小屏幕的设备上可能输入框的宽度加上搜索按钮（由于搜索按钮宽度很小，所以一般都是设置的固定宽度）的宽度不一定就是100%的情况，但勉强能用。今天，在各种浏览网页时突然发现了一个好的解决办法，终于解开了我多年的困扰，就立马当成笔记写在了我的博客里。方法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>非常简单的自适应搜索表单</title>
<style>
*{margin:0;padding:0;outline:0;}
.search_box{border:1px solid #ccc;margin:50px 10px;}
.search_fl{overflow:hidden;}
.search_txt{width:100%;border:0;height:26px;padding:2px 0 2px 5px;}
.btn{background:#ccc;border:0;width:50px;height:30px;float:right;}
</style>
</head>
<body>
<div class="search_box">
    <form>  
        <input type="submit" value="搜索" class="btn">
        <div class="search_fl">
            <input type="text" name="" class="search_txt">
        </div>
    </form>
</div>
</body>
</html>

效果图：