Logo

css解决input和select的宽度不一致问题

photo

2022年04月29日

在重构页面的时候,总会有个困扰,就是input和select的宽度默认不同,input总是比select长那么一点。如下图:

这里写图片描述

然后我们就开始各种调节width,但是一点变化都没有。这是为什么咧?
原因就出在了:input、select默认的样式是不同的,你无法通过直接改变width值去覆盖掉原来的默认样式,所以需要添加一个属性

input,select{
    box-sizing: border-box;
}

这个时候input和select宽度就一致了:

这里写图片描述

解释一下关于box-sizing:
1. border-box:  width为content+padding+border
2. content-box(默认属性值): width的是content,padding以外的再另算。

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

热门文章

ffmpeg 生成水印 1:先要配置ffmpeg的滤镜:参考:https://www.jianshu.com/p/9d24...ffmpeg生成水印 作者:Pastore Antonio
1532 浏览量
Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1474 浏览量
谷歌浏览器扩展程序报错 The message port closed before a response was received. 问题描述ChromeExtension报错:Uncheckedruntime.lastEr...谷歌浏览器扩展程序报错Themessageportclosedbeforearesponsewasreceived. 作者:Pastore Antonio
1469 浏览量
Spring Aop AfterReturning接收返回值 包结构:Spring.xmlUserDao.java测试类Main方法...SpringAopAfterReturning接收返回值 作者:Pastore Antonio
1464 浏览量
CentOS 系统yum安装出现“未找到匹配的参数”、“没有可用软件包”错误的解决办法 帮助文档链接:https://www.opsit.cn/4896.html今天安装fwknop时,...CentOS系统yum安装出现“未找到匹配的参数”、“没有可用软件包”错误的解决办法 作者:Pastore Antonio
1459 浏览量