input输入框的宽度自适应

矫情吗；* 2022-06-07 00:25 733阅读 0赞

场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图：  
![这里写图片描述][SouthEast]  
因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度写死，更换设备后无论是屏幕宽度增大还是缩小，样式一定会乱掉。因此可以将中间输入框的宽度设置为可变的，即可跟随屏幕宽度的变化而变化，这样就解决的适配的问题。且看示例代码：  
**HTML**

<div class="title_box">
        <div class="title_left"></div>
        <input type="text" />
        <div class="title_right"></div>
    </div>

**CSS**  
.title\_box\{  
width: 100%;  
overflow: hidden;  
display: flex;  
\}  
.title\_left\{width: 100px;height: 40px;border: 1px solid red;float: left;\}  
.title\_right\{width: 100px;height: 40px;border: 1px solid green;float: right;\}  
.title\_box input\{width: 100%;\}  
重点已在上面标记出来了，就是父层使用display:flex;然后左边和右边的元素分别定宽并浮动，然后中间的输入框就可以宽度100%啦。你可以试试将display:flex去掉，此时输入框的100%就是整个屏幕的宽度。关于display:flex的用法请看这篇文章：[http://blog.csdn.net/linda\_417/article/details/51507176][http_blog.csdn.net_linda_417_article_details_51507176]

[SouthEast]: /images/20220607/ffdef511da6142aca26ccf1ec718b3a6.png
[http_blog.csdn.net_linda_417_article_details_51507176]: http://blog.csdn.net/linda_417/article/details/51507176

发表评论取消回复

表情：

评论列表（有 0 条评论，733人围观）

还没有评论，来说两句吧...

相关阅读

相关 UICollectionViewCell自适应宽度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

水深无声/ 2023年02月28日 00:59/ 0 赞/ 42 阅读

相关前端设置input输入框宽度固定，高度随输入内容变高

局限1：input只能控制输入内容为一行；textarea需要手动拖动改变大小。实现：像 div, p这样的块元素默认是不可编辑的，但我们可以在标签内添加 contente

梦里梦外;/ 2022年12月30日 12:56/ 0 赞/ 156 阅读

相关 android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应

为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待

柔光的暖阳◎/ 2022年10月16日 00:43/ 0 赞/ 532 阅读

相关移动端布局实现搜索框宽度自适应

描述例如移动端京东页面 ([https://m.jd.com/][https_m.jd.com]) 的搜索框布局, 两侧的内容是固定不变的, 当浏览器宽度变化时, 只有

柔光的暖阳◎/ 2022年08月30日 15:59/ 0 赞/ 247 阅读

相关移动wap input登陆框自适应屏幕大小

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/h

快来打我*/ 2022年08月23日 11:53/ 0 赞/ 192 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 369 阅读

相关 BFC宽度自适应布局

BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

冷不防/ 2022年06月11日 05:55/ 0 赞/ 352 阅读

相关 input输入框的宽度自适应

场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图： ![这里写图片描述][SouthEast] 因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度

矫情吗；*/ 2022年06月07日 00:25/ 0 赞/ 734 阅读

相关 div自适应宽度

.item\_sel\{ min-width: 141px; width: auto; \_width:141px; white

小灰灰/ 2022年05月16日 05:37/ 0 赞/ 426 阅读

相关 div宽度自适应

自适应宽度的层不要指定宽度和float属性自适应宽度的层物理的位置放在最下面自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象

r囧r小猫/ 2022年05月15日 14:47/ 0 赞/ 364 阅读