学成在线案例重做过程中出现的一些问题未解决03-----行内元素inline-block的问题（已解决）

2024-01-24 16:47:16

昨天重做网页又遇到一个小细节问题，特此来记录。
首先还是先放代码

<!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 class="user">
            <img src="images02/user.png" alt="">
            <p>qq-leishu</p>
        </div>
    </div>
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>&gt</span></a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                    <li><a href="#">前端开发<span>&gt</span</a></li>
                </ul>
            </div>
            <div class="course">
                <h3>我的课程表</h3>
                <div class="box">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>

                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <p>修改兴趣</p>
    </div>
    <div class="box01 w">
        <div class="box01-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box01-bd">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <!-- <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
    </div>
</body>

</html>

        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f3f5f7;
        }
        
        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: 88px;
            /* background-color: blue; */
        }
        
        .search input {
            float: left;
            width: 360px;
            height: 40px;
            border: 1px solid #004aff;
            border-right: 0;
            /* vertical-align: middle; */
        }
        
        .search button {
            width: 49px;
            height: 42px;
            border: none;
            /* vertical-align: middle; */
        }
        
        .user {
            float: right;
            margin-right: 40px;
        }
        
        .user p {
            float: right;
            font-size: 14px;
            color: #666;
        }
        
        .banner {
            height: 420px;
            background-color: #1c036c;
        }
        
        .banner .w {
            height: 420px;
            background: url(images/banner2.png) no-repeat top center;
        }
        
        .w .subnav {
            float: left;
            width: 193px;
            height: 420px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .subnav ul li {
            padding: 0 20px;
        }
        
        .subnav ul li a {
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            color: #fff;
        }
        
        .subnav ul li span {
            float: right;
        }
        
        .subnav ul li a:hover {
            color: #004aff;
        }
        
        .course {
            float: right;
            width: 235px;
            height: 300px;
            margin: 53px 0 69px 0;
            background-color: pink;
        }
        
        .course h3 {
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background-color: #9bceea;
            border-bottom: 1px solid #9bceea;
        }
        
        .box {
            padding: 0 18px;
        }
        
        .box ul li h4 {
            font-size: 14px;
            color: #4e4e4e;
        }
        
        .box ul li p {
            font-size: 12px;
            color: #a5a5a5;
        }
        
        .box ul li {
            padding: 13px 0;
            border-bottom: 1px solid #a5a5a5;
        }
        
        .box .more {
            display: block;
            margin-top: 6px;
            width: 200px;
            height: 40px;
            border: 1px solid #00a4ff;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
        }
        
        .goods {
            height: 64px;
            margin-top: 10px;
            background-color: #fff;
            box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.1);
        }
        
        .goods h3 {
            float: left;
            padding: 22px 32px;
            font-size: 16px;
            color: #004aff;
        }
        
        .goods ul li {
            float: left;
            padding: 22px 0;
        }
        
        .goods ul li a {
            padding: 0 33px;
            border-left: 1px solid #a5a5a5;
        }
        
        .goods p {
            float: right;
            padding: 25px 30px 25px 0;
            font-size: 14px;
            color: #004aff;
        }
        
        .box01 {
            width: 1205px;
            height: 3000px;
            margin-top: 36px;
            background-color: pink;
        }
        
        .box01-hd {
            height: 33px;
        }
        
        .box01-hd h3 {
            float: left;
            font-size: 20px;
            color: #494949;
        }
        
        .box01-hd a {
            float: right;
            font-size: 12px;
            color: #a5a5a5;
            padding: 12px 37px 22px 0;
        }
        
        .box01-bd {
            width: 1205px;
        }
        /* .box01-bd ul {
            float: left;
        } */
        
        .box01-bd ul li {
            display: inline-block;
            /* float: right; */
            width: 229px;
            height: 271px;
            background-color: blue;
        }

其结果是这样的,啊！！这是怎么一回事。

按照我之前设计的，粉色box01的下面bd，设计一个ul，并且在ul里面加入10个li,但是因为li是块元素，所以他不会横着排列，聪明的我，想到了把li转换成行内块元素（太蠢了，不想着浮动），于是乎就出现了这个情况，不知道怎么搞的，后来偶然在网上遇到一个也是自学前端的，请教了一下，才明白了怎么一回事。不过说来惭愧，你说同样是人，人家学的时间和我的一样，人家咋就能看出来自己硬是看不出来呢，恩，这件事值得自己反思。好吧，言归正传，原来是我的a标签“查看全部”给搞了一个浮动，导致那个box01-bd盒子的实际宽度小了（虽然也不能这么说吧）给ul也加个浮动就行了。

瞧见没，a的下边距啊，太大了，导致第5的li的宽度不够了，就被挤下来了呗。这么个问题还不如用浮动更简单。不过还是有所收获的，还是听了他的建议听了一下B站李江南老师的浮动流相关的内容，好的不要不要的，浮动又get到了新的知识点，尤其是浮动流基本概念那一节，真巧，就是用行内块元素这个内容引出的浮动流的概念的。

码农公寓

相关文章