怎么才能让select标签和input对齐

img


如图所示,我的selsect标签和输入框不对齐,怎么才能让其对齐。
代码如下:


   <tr>
                <td colspan="3">
                    <label for="textfield3" style="float: left;line-height: 30px;">
                        车牌号码: label>
                    
                    <select name="" id="cplb" onchange="addcph(value)"
                        style="width:25%;font-size:14px;height: 30px;line-height: 30px;text-align: center;white-space: normal;border-radius: 5px;float: left;">
                        <option value="2" id="">option>
                        <option value="0" id="temporarycp">option>
                        <option value="1" id="routinecp">option>
                    select>
                    <input type="text" id="cphm"
                        style="width:30%;font-size:14px;height: 30px;line-height: 30px;text-align: center;white-space: normal;border-radius: 5px;margin-left: 5px;float: left;">

                    td>
            tr>

建议使用怪异盒模型:border-box。原因就是输入框有外廓线,把外面整个盒子的高度都撑高了。
要么你就复杂点,改高度或者是上外边距调至一样高就行了。

img

img

我在浏览器急速模式下是对齐的

使用 margin-top 微调

可以用 display: inline-block;
实在不行就还是浮动 用margin-top 微调
或者 更简单粗暴的 用定位
注意 边框 高度 都保持一致

文章:Select标签与input标签结合使用 中也许有你想要的答案,请看下吧

用弹性布局 垂直居中就行了吧

display: flex;
align-items: center;
  1. 用弹性布局
display: flex;
align-items: center;
  1. 或者
box-sizing:border-box;

这两种的其中一种都可以