html - 不使用 br 的另一种通过 css 换行的方法？

Question

<div class="HL_iconCont">
    <ul id="dates">
        <li>
            <a href="#HomeworkHelp">
                <div class="topicIconCont homework_1"><br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Accounting">
                <div class="topicIconCont homework_2">Accounting<br />
                    Homework Help
                </div>
            </a>
        </li>
        <li>
            <a href="#Economics">
                <div class="topicIconCont homework_3"> Economics <br />
                    Homework Help 
                </div>
            </a>
        </li>
    </ul>
</div>

我有一个 <div>名为 topicIconCont这是重复其 width:auto;在 <li>标签。我还为每个 <li> 使用了多个类标签，因为它包含不同的图标图像。现在我想打破这个<div>中写的句子在图标图像下方，我无法使用 <br> , <span> , 或 <p>标记在中间，因为该行将直接来自数据库。

例如:这里的代码——

Accounting<br />
                Homework Help

有没有什么办法可以不使用<br>来破解会计？标签？我可以通过 css 管理它吗？虽然我试过word break属性(property)，但它仍然无法正常工作。我也无法修复它的宽度，因为它在重复并且内容可能会有所不同。请尽快提出任何替代方案，我该如何解决？

问候，

尼迪

Answer 1

首先， block 级元素，如 <div>在 <a> 等内联元素中无效.使用跨度或类似内联的东西。

其次，只需使用 CSS 在 div 上设置 padding-top，这样内容就可以从 div 的顶部开始任意距离，让您的图标很好地显示。