新手页面缩小时搜索部分的输入框与按钮不对齐问题

最新推荐文章于 2025-05-27 11:12:37 发布

WDNMde_

最新推荐文章于 2025-05-27 11:12:37 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

分类专栏：小白笔记 css3 文章标签： css html css3

本文链接：https://blog.csdn.net/WDNMde_/article/details/119255269

小白同时被 3 个专栏收录

15 篇文章

订阅专栏

笔记

13 篇文章

订阅专栏

css3

2 篇文章

订阅专栏

本文介绍了初学者在编写搜索框时遇到的页面缩小时输入框与搜索按钮对齐问题。通常情况下，开发者会使用浮动布局，但这种方式在页面尺寸变化时可能导致对齐不准确。解决方案是采用Flex布局，它能更好地处理元素的对齐和响应式设计。通过调整CSS样式，特别是应用`display: flex`和调整子元素的属性，可以确保输入框和搜索按钮在任何屏幕尺寸下都能保持对齐。此外，文章还建议熟悉并使用Flex布局，以提高响应式网页设计的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学者写搜索框部分时，缩小页面造成输入框与搜索按钮对不齐的问题

一般来说初学者写搜索框都是用浮动来实现，一个div中放一个input，和一个a标签包含字体图标
HTML

<div class="soso-box ">
                    <input type="text" placeholder="查询目的地/酒店/攻略">
                    <div class="btn1"><a href="" class=" btn iconfont">&#xe77d;</a></div>
</div>

CSS：

.site-head .header-con .soso-box {
    float: left;
    margin-left: 20px;
    width: 420px;
    padding-top: 4px;
}
.site-head .header-con .soso-box input {
    float: left;
    height: 30px;
    width: 361px;
    border: 1px solid #20BD9A;
    border-radius: 4px 0 0 4px;
    outline: none;
    font-size: 14px;
    padding-left: 10px;
    /*box-sizing: border-box;*/
}

.site-head .header-con .soso-box .btn {
    display: inline-block;
    width: 32px;
    height: 30px;
    background-color: #20BD9A;
    color: white;
    text-align: center;
    line-height: 30px;
    border-radius: 0 4px 4px 0;
}

由于input设置了盒子边框，所以在页面缩小时就会造成对不齐。因此只需要将input设置为盒子模型，然后修改好高度即可。
其实更好地做法是flex来实现。