学成在线案例重做过程中出现的一些问题未解决01-----两个行内块元素的对齐问题

最新推荐文章于 2024-11-01 12:26:05 发布

A &......

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量113

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/m0_47531829/article/details/115611351

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

开始做header头部的时候出现了一个问题。虽然已经经过自己的瞎尝试解决了。但是我却不能了解到问题的本质问题，或者通俗一点来讲，我根本就不知道为什么会出现这种问题。

html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style02.css">
</head>

<body>
    <div class="header w">
        <div class="logo"><img src="images02/logo.png" alt=""></div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" value="请输入关键词">
            <button><img src="images02/search.png" alt=""></button>
        </div>
    </div>
</body>

</html>

=====================================================================
css代码如下

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.w {
    width: 1205px;
    margin: auto;
}

.header {
    height: 40px;
    margin: 30px auto;
    background-color: pink;
}

.header .logo {
    float: left;
    margin-right: 40px;
}

.header ul {
    float: left;
}

.header ul li {
    float: left;
    padding-left: 20px;
}

.header ul li a {
    display: block;
    height: 41px;
    padding: 0 10px;
    line-height: 41px;
    font-size: 18px;
    color: #050505;
}

.header ul li a:hover {
    border-bottom: 1px solid #004aff;
}

.search {
    float: left;
    width: 412px;
    height: 42px;
    /* margin-left: 75px; */
}

.search input {
    /* float: left; */
    width: 354px;
    height: 40px;
    border: 1px solid #004aff;
    border-right: 0;
}

.search button {
    width: 49px;
    height: 40px;
    border: none;
}

在此css代码中，如果search里面input标签不加浮动float:left的话，会出现这种情况
在这里插入图片描述
input居然被挤到search下面去了，此时想到老师说的input和button是两个行内块元素，有块元素的概念，想的是可能是因为没有浮动的原因，加了浮动后并没有出现这种情况了。此时可能是感觉自己的浮动知识还没学的太懂。上网查了查，input和search高度不同是因为准线的问题。解决方法：
在这里插入图片描述
转载：https://blog.csdn.net/qq_42527726/article/details/102718778
这篇博客主要讲的是input和search的问题，总结的很到位唉。