html解决页面放大后元素乱排的问题

最新推荐文章于 2022-09-28 14:24:40 发布

原创最新推荐文章于 2022-09-28 14:24:40 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在HTML页面中，由于放大操作导致元素排列混乱的问题。通过提供一段未解决问题的HTML和CSS代码示例，展示了问题的现象。然后，提出了解决方案，即在CSS中添加`zoom: 1;`属性，以确保页面放大时元素布局的稳定性。

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

未解决问题之前：
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="./css/1.css" >
    <link rel="stylesheet" href="./icon/font_3216801_1jd55lusmmu/iconfont.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="left">
            <img src="./images/images/未标题-1_01.gif">
        </div>
        <div class="right">
            <ul>
                <li class="iconfont icon-home2 "><p>Home</p></li>
                <li class="iconfont icon-service"></li>
                <li class="iconfont icon-line-computer"></li>
                <li class="iconfont icon-computer"></li>
                <li class="iconfont icon-good"></li>
                <li class="iconfont icon-book"></li>
                <li class="iconfont icon-wangluo"></li>
                <li class="iconfont icon-wangluo"></li>
                <li class="iconfont icon-icon-test"></li>
            </ul>
        </div>
    </header>
</body>
</html>

css代码：

*{
    margin: 0px;
    padding: 0px;
}
html,body{
    height: 100%;
}
ul,ol{list-style: none;}

/* 头部 */
header{
    height: 80px;
    position: relative;
    /* background-color: aqua; */
}
/* 头部的左边 */
header>.left{
     position: absolute;
     left: 0px;
}
/* 头部的右边 */
header>.right{
    min-width: 915px;
    width: 915px;
    /* height: 80px; */
    position: absolute;
    right: 0;
}
header>.right li{
    width: 99px;
    height: 80px;
    float: left;
    border-left: 1px solid #d7e4ed;
    font-size: 32px;
    color: #75a7c2;
    text-align: center;
    line-height: 80px;
}

用这种方法写成后，当页面放大后，会出现下面这种结果：
页面放大后，元素乱排
解决方法：
在css页面中加入：