Logo

Logo

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

Pastore Antonio
Pastore Antonio 2022年04月29日
1199 阅读 0 评论 约 349 字 阅读约 1 分钟

在重构页面的时候,总会有个困扰,就是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以外的再另算。
查看完整代码

橙子主题打折出售

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

购买它

附件下载

共 2 个文件
这里写图片描述
PNG 2.3 KB
这里写图片描述
PNG 2.3 KB
部分文章可能存在转载,如果涉及到侵权,请联系删除文章。

探索AIGC相关的精彩内容,共 15 篇文章

Azure AI 服务之语音识别

简介 Azure AI 服务中的语音识别 API 是微软提供的一项先进技术,旨在帮助开发者轻松实现语 ... css解决input和select的宽度不一致问题

2026-02-17 · Xzavier Aaron
MCP | 一文详解什么是 MCP以及 MCP 可以做什么

一、什么是 MCP MCP(Model Context Protocol)是一个专为大型语言模型(L ... css解决input和select的宽度不一致问题

2026-02-14 · Shen, Luke
你的工作流程,值得一个“全自动数字分身”:录制、截图、成文,一气呵成

一、一句话认识 TestFlow Recorder 在数字化工作环境中,如何准确记录操作步骤并生成清 ... css解决input和select的宽度不一致问题

2026-02-14 · Xzavier Aaron
Flowise 前端框架配置指南

用户需求 问题:有没有适合配置 Flowise 的前端框架? 目标:寻找类似 Open WebUI ... css解决input和select的宽度不一致问题

2026-02-14 · Xzavier Aaron