实现一个搜索框,按钮宽度固定,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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:版本号排序
下一篇:实现get函数,对于异常情况做处理返回值

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月04日 19时21分09秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

linux tcp 113错误,linux系统报tcp_mark_head_lost错误的处理方法 2021-06-24
南昌工程学院c语言答案,南昌工程学院C语言程序设计基础课件第3讲运算符和表达式... 2019-04-21
python学画画_python学画画(下) 2019-04-21
云栖社区 mysql_【直播结束,已更新回放】PG、MySQL到底哪个好?云栖说这次请来五位专家撕了一下-阿里云开发者社区... 2019-04-21
老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福 2019-04-21
mysql驱动多次执行问题_Laravel5.2队列驱动expire参数设置带来的重复执行问题 数据库驱动... 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