最近在使用CSS样式设计网页时,发现两个输入框之间出现了一些间隙,很不美观,特来分享一下解决方案。 /* CSS代码 */ input { border: none; outline: none; b
最近在使用CSS样式设计网页时,发现两个输入框之间出现了一些间隙,很不美观,特来分享一下解决方案。
/* CSS代码 */ input { border: none; outline: none; background-color: transparent; box-sizing: border-box; height: 30px; padding: 5px; font-size: 16px; color: #333; } input[type="submit"] { background-color: #f0f0f0; color: #333; height: 40px; padding: 10px 20px; border: none; cursor: pointer; } .input-group { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; } .input-group input { flex-basis: calc(50% - 10px); } .input-group input:first-child { margin-right: 10px; }
解决方案如下:
第一步,设置输入框的外边框为none,取消输入框的外框线。
第二步,设置输入框的背景色为透明,取消输入框的背景色。
第三步,设置输入框的盒模型为边框盒模型,确保输入框高度和宽度的计算方式包含了边框和内边距。
第四步,设置输入框的高度和内边距为30px和5px,字体大小为16px,字体颜色为333333。
第五步,设置提交按钮的背景颜色为f0f0f0,字体颜色为333333,高度为40px,内边距为10px和20px,边框为none,光标变为手型。
第六步,设置输入框控件(input)的显示方式为flex,采用弹性盒子模型,设置flex-wrap为wrap,使输入框控件可以自动换行,设置justify-content为space-between,使两个输入框控件之间的间隔相对于容器居中对齐,设置margin-bottom为30px,使两个输入框控件之间保持合理的垂直距离。
第七步,设置.input-group input的flex-basis为50%减去10px,即占据父容器的一半减去间隔距离,使得两个控件的宽度相等且与容器对齐。
第八步,设置.input-group input:first-child的margin-right为10px,即第一个控件右外边距为10px,与第二个控件形成间距。
最后,通过CSS样式的设置,让两个输入框之间的间隙美观地消失了,使得网页更加整洁、美观。
粉丝
0
关注
0
收藏
0