input和button等高但是对不齐的解决办法

最新推荐文章于 2024-01-05 14:15:42 发布

原创最新推荐文章于 2024-01-05 14:15:42 发布 · 524 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

前端入门小练习持续更新专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用CSS调整input输入框和button按钮的垂直对齐方式，以及如何清除浏览器默认给input的内外边距。通过设置vertical-align属性和使用通配符选择器清除默认样式，实现了元素的布局优化。

给input标签选择器设置vertical-align: top;

或者给button标签设置vertical-align: middle;

浏览器默认给input输入框设置了上下内边距1px，左右内边距2px，记得一定要使用通配符选择器清除默认内外边距

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 600px;
        margin: 100px auto;
      }
      /* input和button是行内块元素 */
      input {
        width: 319px;
        height: 36px;
        padding-left: 21px;
        /* 行内块元素水平对齐 */
        /* vertical-align: top; */
        /* 清除input外廓线 */
        outline: none;
        border: 2px solid #cfa75a;
        border-right: none;
      }
      /* 改变placeholder默认样式 */
      input::placeholder {
        color: #ccc;
        font-size: 12px;
      }
      button {
        width: 110px;
        height: 40px;
        vertical-align: middle;
        /* 清除button的默认边框 */
        border: none;
        background: url(./search.png) no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input type="text" placeholder="搜一搜" /><button></button>
    </div>
  </body>

问题解决啦！！！