gpt4 book ai didi

css - 如何防止文本扩展
  • 容器高度?
  • 转载 作者:太空宇宙 更新时间:2023-11-04 14:40:55 25 4
    gpt4 key购买 nike

    My code - Plunker

    我尝试创建一个流畅的布局,我的侧边栏由链接列表组成。我想要每个 <li>元素是一个完美的正方形,当我在里面添加文本时问题就开始了。它似乎在增加我的正方形的高度,而我得到的是一个矩形。如果你检查我的代码,我的列表的维度 objects是32 像素 X 43 像素。如何防止内部文本扩展 <li>元素?我怎样才能让文本出现在 <li> 的左下角?元素?

    我的 CSS:

    body{
    width: 100%;
    margin: 0 auto;
    }

    .content {
    width: 95%;
    display: inline;
    float: left;
    }

    .sidebar{
    width: 5%;
    display: inline;
    float: left;
    }

    .sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

    }

    .sidebar li{
    padding: 50%;
    background-color: oldlace;
    }

    .sidebar a{
    display: block;
    font-size: 0.5em;
    }

    我的 HTML:

     <body >
    <h1>Hello Plunker!</h1>

    <div class="sidebar">
    <ul>
    <li><a href="#">ANALYTICS</a></li>
    <li><a href="#">STYLES</a></li>
    <li><a href="#">VOTERS</a></li>
    <li><a href="#">GET STARTED</a></li>
    <li><a href="#">UPDATE</a></li>
    </ul>
    </div>
    <div class="content">
    <p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
    </div>

    最佳答案

    您可以在 li 上使用 position: relative,在 a 上使用 position: absolute。使用 absolute 将导致 a 元素不影响 li 的尺寸。这样你也可以把它放在 Angular 落里。

    http://plnkr.co/edit/kcjCl1?p=preview

    .sidebar li{
    padding: 50%;
    position: relative;
    }

    .sidebar a{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    }

    关于css - 如何防止文本扩展 <li> 容器高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18343300/

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