display:flex和display：block的区别

最新推荐文章于 2024-04-22 09:19:22 发布

脑子不太灵的鸭头

最新推荐文章于 2024-04-22 09:19:22 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_15571919/article/details/124564700

版权

css 专栏收录该内容

2 篇文章

订阅专栏

西安理工大学的网站展示了学校、教工、校友等多元角色的便捷服务，包括人才招聘、图书馆、邮件系统和在线教育平台等，一键直达各类资源。

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

    <ul class="left">
        <li> <a href="">学校</a></li>
        <li> <a href="">教工</a></li>
        <li> <a href="">校友</a></li>
        <li> <a href="">考生</a></li>
        <li> <a href="">合作者</a></li>
        <li> <a href="">投稿系统</a></li>
    </ul>

    <ul class="right">
        <li> <a href="">人才招聘</a></li>
        <li> <a href="">图书馆</a></li>
        <li> <a href="">邮件系统</a></li>
        <li> <a href="">云课堂</a></li>
        <li> <a href="">学分制系统</a></li>
        <li> <a href="">投稿系统</a></li>
    </ul>

</div>

<!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>
</head>
<style>
    .top {
        background-color: #83529a;
        width: 100%;
        height: 50px;
        position: relative;
    }
    
    .left li a {
        color: #fff;
        font-size: 15px;
        display: block;
        text-decoration: none;
    }
    
    .right li a {
        color: #fff;
        font-size: 15px;
        display: block;
        text-decoration: none;
    }
    
    .left {
        float: left !important;
        display: flex;
        /* 此处用display:block不起作用   用flex起作用 为什么？*/
        width: 33%;
    }
    
    .left li {
        margin-right: 31px;
    }
    
    .right li {
        margin-right: 31px;
    }
    
    .right {
        float: right !important;
        display: flex;
        /* 此处用display:block不起作用   用flex起作用 */
        width: 50%;
    }
    
    li {
        list-style: none;
    }
</style>

<body>
    <div class="top">

        <ul class="left">
            <li> <a href="">学校</a></li>
            <li> <a href="">教工</a></li>
            <li> <a href="">校友</a></li>
            <li> <a href="">考生</a></li>
            <li> <a href="">合作者</a></li>
            <li> <a href="">投稿系统</a></li>
        </ul>

        <ul class="right">
            <li> <a href="">人才招聘</a></li>
            <li> <a href="">图书馆</a></li>
            <li> <a href="">邮件系统</a></li>
            <li> <a href="">云课堂</a></li>
            <li> <a href="">学分制系统</a></li>
            <li> <a href="">投稿系统</a></li>
        </ul>

    </div>
</body>

</html>

目前的效果图：

想实现的是：

在这里插入图片描述

这块的原始代码块：

<div class="headerView">
            <div class="container">
                <div class="clearfix head_tab">
                    <ul class="pull-left head_ln"><li><a href="jsdl/xs.htm">学生</a></li>
                        
<li><a href="jsdl/jg.htm">教工</a></li>
                        
<li><a href="jsdl/xy.htm">校友</a></li>
                        
<li><a href="jsdl/ks.htm">考生</a></li>
                        
<li><a href="jsdl/hzz.htm">合作者</a></li>
                        
<li><a href="http://202.200.126.217/cm-sites/pms/login.html">投稿系统</a></li>
                        
</ul>
                    <ul class="pull-right head_rn">
                        <script language="javascript" src="/system/resource/js/dynclicks.js"></script><script language="javascript" src="/system/resource/js/openlink.js"></script>    <li><a href="http://renshichu.xaut.edu.cn/zpxx1/zpgg.htm" target="_blank" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 45753)">人才招聘</a></li>
    <li><a href="http://library.xaut.edu.cn/" target="_blank" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 45754)">图书馆</a></li>
    <li><a href="http://mail.xaut.edu.cn/" target="_blank" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 45755)">邮件系统</a></li>
    <li><a href="http://mooc.xaut.edu.cn/home/index.mooc" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 63871)">云课堂</a></li>
    <li><a href="http://xfz2.xaut.edu.cn/home.html" target="_blank" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 63431)">学分制主页</a></li>
    <li><a href="http://ids.xaut.edu.cn/authserver/login?service=http%3A%2F%2Fmy.xaut.edu.cn%2Flogin.portal" target="_blank" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 45756)">服务门户</a></li>
    <li><a href="http://global.xaut.edu.cn/" title="" onclick="_addDynClicks(&quot;wburl&quot;, 1570106337, 63561)">Global</a></li>

                    </ul>
                </div>
            </div>
        </div>