sk4pzz 2022-01-20 12:56 采纳率: 80%
浏览 37
已结题

html的li的表单以及背景如何平铺

问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
运行结果及报错内容
    <style>
        .box0{
            position: relative;
            background: url("../Steve/img/header_bg.jpg");
            border: 2px;
        }
        .box1{
            position: relative;
            background: url("../Steve/img/header_bg.jpg");
            border: 2px;
            top: 4px;
            display: inline-block;
            width: 600px;
            height: 100px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        a:link{
            color: white;
        }
        ul{
            width: 100%;


        }
        li{
            list-style: none;
            color: white;
            display: block;
            float: left;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box0">
        <img src="../Steve/img/logo.jpg" alt="">

    </div>
    <div class="box1">
        <ul>
            <li><a href="#">首页&nbsp</a></li>
            <li><a href="#">信息公开指南&nbsp  </a></li>
            <li><a href="#">信息公开制度&nbsp  </a></li>
            <li><a href="#">年度报告 &nbsp </a></li>
            <li><a href="#">公开目录 &nbsp </a></li>
            <li><a href="#">公开申请表 &nbsp </a></li>
        </ul>
    </div>

目标效果

img

实际效果

img

  • 写回答

2条回答 默认 最新

  • 前端互助会 2022-01-20 13:48
    关注

    img


    使用flex布局，以下代码供你参考

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
    <style>
        html,body,ui{
            margin: 0 ;
            padding: 0;
        }
        .box0{
            position: relative;
            background: red;
            border: 2px;
        }
        .box1{
            position: relative;
            background:blue;
            border: 2px;
            top: 4px;
            display: inline-block;
            width: 100%;
            height: 100px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        a:link{
            color: white;
        }
        ul{
            width: 100%;
            display: flex;
            height: 100px;
            align-items: center;
            margin: 0;
        }
        li{
            width: 300px;
            list-style: none;
            color: white;
        }
    </style>
</head>
<body>
<div class="box0">
<!--    <img src="../Steve/img/logo.jpg" alt="">-->

</div>
<div class="box1">
    <ul>
        <li><a href="#">首页&nbsp</a></li>
        <li><a href="#">信息公开指南&nbsp  </a></li>
        <li><a href="#">信息公开制度&nbsp  </a></li>
        <li><a href="#">年度报告 &nbsp </a></li>
        <li><a href="#">公开目录 &nbsp </a></li>
        <li><a href="#">公开申请表 &nbsp </a></li>
    </ul>
</div>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 1月28日
  • 已采纳回答 1月20日
  • 创建了问题 1月20日

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器