实现一个搜索框,按钮宽度固定,input的宽度自适应
发布日期:2021-11-21 16:35:54
浏览次数:8
分类:技术文章
本文共 542 字,大约阅读时间需要 1 分钟。
1. 利用flex-grow让input填充剩余空间
<div> <input> <button type="button">搜索</button> </div>div{
display: flex; } button{ width:100px; } input{ flex-grow: 1; }2.同样使用flex布局,给input设置width:100%;给button设置固定宽度同样可以让Input填充剩余空间,而且不会让button换行
<div> <input> <button type="button">搜索</button> </div>div{
display: flex; border: 1px solid red; } button{ width:100px; } input{ width: 100%; }3. 使用grid布局,让Input列自动撑开,给button列固定宽度
<div> <input> <button type="button">搜索</button> </div>div{
border: 1px solid red; display: grid; grid-template-columns: auto 100px; }转载地址:https://blog.csdn.net/yyychocolate/article/details/108263237 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年03月04日 19时21分09秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
南昌工程学院c语言答案,南昌工程学院C语言程序设计基础课件第3讲运算符和表达式...
2019-04-21
python学画画_python学画画(下)
2019-04-21
老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福
2019-04-21
mysql获取刚新增的数据库_如何取得刚插入数据库的数据的id mysql
2019-04-21
python将10到1递减_(Python)如何将3个递减列表合并成一个递减列表?
2019-04-21
python脚本怎么用来处理数据_长时间运行数据处理python脚本的程序结构
2019-04-21
python转成c 语言_将Python对象转换为C void类型
2019-04-21
resin mysql_Eclipse+resin+mysql 安装及环境配置
2019-04-21
redis的使用 Java_java中使用redis
2019-04-21
java 数组元素位置_Java – 在数组中获取元素位置
2019-04-21
c 泛型与java泛型_C ++和Java中的“泛型”类型之间有什么区别?
2019-04-21
java 返回实体对象_java 封装返回结果实体类 返回结果以及错误信息
2019-04-21
java web 防止sql注入攻击_JavaWeb防注入知识点(一)
2019-04-21
java ssm 异常分类_SSM项目常见的异常与处理提示(一)
2019-04-21
java定义矩形类_Java定义矩形类
2019-04-21
java变量怎么变常量_Java的常量与变量是什么?怎么学习呀?
2019-04-21
java开发招聘试题_客户化开发招聘试题-Java开发.doc
2019-04-21