[分享]css两个输入框有间隙

最近在使用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样式的设置，让两个输入框之间的间隙美观地消失了，使得网页更加整洁、美观。