gpt4 book ai didi

css -
  • 宽度和文本大小调整
  • 转载 作者:行者123 更新时间:2023-11-27 23:42:11 29 4
    gpt4 key购买 nike

    我在 li 元素的宽度和文本大小方面遇到了一些问题。我正在使用 text-size-adjust 使文本在移动设备上可读,li 高度随着文本而不是宽度而增长,它保持文本原始大小。所以文本重叠。

    * { text-size-adjust: 200%; }

    #navigation{
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
    }

    #navigation ul{
    display: flex;
    }

    #navigation a{
    color: black;
    text-decoration: none;
    font-size: 25px;
    }

    #navigation a:visited{
    color: black;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>BASE</title>
    <link rel="stylesheet" href="../styles/backgradient.css" />
    <link rel="stylesheet" href="../styles/base.css" />
    <link rel="stylesheet" href="../styles/navigation.css" />
    </head>
    <body>
    <nav id="navigation">
    <ul>
    <li><a href="">Projets</a></li>
    <li><a href="">Réseaux</a></li>
    </ul>
    <a>変態 白雪</a>
    </nav>
    <div id="content">

    </div>
    </body>
    </html>

    最佳答案

    由于文本未随屏幕大小调整的问题,首先您必须删除类中定义的字体大小,然后通过定义将字体大小添加到 * {}vw 的大小(视口(viewport)宽度)。这样文本大小将跟随浏览器窗口的大小。试试下面的例子看看。有关更多信息,请查看 w3 文档。 https://www.w3schools.com/howto/howto_css_responsive_text.asp

    * {
    font-size-adjust: 200%;
    font-size:4.5vw;
    }

    #navigation {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
    }

    #navigation ul {
    display: flex;
    }

    #navigation a {
    color: black;
    text-decoration: none;

    }

    #navigation a:visited {
    color: black;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />

    <title>BASE</title>
    <link rel="stylesheet" href="../styles/backgradient.css" />
    <link rel="stylesheet" href="../styles/base.css" />
    <link rel="stylesheet" href="../styles/navigation.css" />
    </head>
    <body>
    <nav id="navigation">
    <ul>
    <li><a href="">Projets</a></li>
    <li><a href="">Réseaux</a></li>
    </ul>
    <a>変態 白雪</a>
    </nav>
    <div id="content">

    </div>
    </body>
    </html>

    关于css - <li> 宽度和文本大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56979969/

    29 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com