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以外的再另算。

橙子主题打折出售

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

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

热门文章

Windows Server IIS+ARR反向代理(配置反向代理服务器) 1.概念说明:反向代理反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相...WindowsServerIIS+ARR反向代理(配置反向代理服务器) 作者:Pastore Antonio
1581 浏览量
ffmpeg 生成水印 1:先要配置ffmpeg的滤镜:参考:https://www.jianshu.com/p/9d24...ffmpeg生成水印 作者:Pastore Antonio
1508 浏览量
C#中List的FindAll方法的正确打开方式 初略的介绍一种常见的List写法,这种写法在3.0以后其实是很简单的,但是在2.0左右的系统运用中还...C#中List的FindAll方法的正确打开方式 作者:Pastore Antonio
1467 浏览量
IntelliJ IDEA 代码字体大小的快捷键设置放大缩小(很实用)(图文详解) 这是在设置IntelliJIDEA...IntelliJIDEA代码字体大小的快捷键设置放大缩小(很实用)(图文详解) 作者:Pastore Antonio
1461 浏览量
Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1447 浏览量