gpt4 book ai didi

css -
  • 标题和描述在顶部对齐
  • 转载 作者:太空宇宙 更新时间:2023-11-04 15:52:05 26 4
    gpt4 key购买 nike

    不太确定如何描述我要实现的目标,所以我有一些屏幕截图。基本上,我想要 <h2>所有的顶部边缘都对齐,<p> 也是如此。的。

    我目前拥有的: current

    我想要的是: ideal

    index.html

    <div id="services">
    <p><span>Services</span></p>
    <ul>
    <li><h2>Identity and Logo Design</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>Branding</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>Web Design and Development</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>Social Media</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    </ul>
    <div class="next">
    <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end services -->

    样式.css

    #services {
    border-top: 1px solid #202020;
    padding-bottom: 60px;
    padding-top: 40px;
    }

    #services p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    }

    #services ul li {
    display: inline-block;
    padding-left: 100px;
    width: 160px;
    }

    #services ul li:first-child {
    padding-left: 0px;
    }

    #services ul li h2 {
    padding-top: 20px;
    text-align: center;
    }

    #services .next {
    float: right
    }

    最佳答案

    <h2>怎么样? s 一个高度,例如

    #services ul li h2 {
    height:2.5em;
    }

    FIDDLE

    编辑

    如果您没有高度,则元素大小将取决于其内容,有些 header 的文本比其他 header 的文本多,迫使文本换行,这将具有与一个衬垫不同的高度。

    段落的垂直位置将取决于标题的高度,因此如果所有标题的高度都相同,那么段落的垂直位置也将相同。

    关于css - <li> 标题和描述在顶部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11076552/

    26 4 0
    文章推荐: c++ - 内存中分配的SQL小表
    文章推荐: html - "no-referrer"元标记不起作用
    文章推荐: C++重载
    文章推荐: C++多维数组
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com