显示& lt; li>列中的元素

本文关键字：元素 li lt 显示 | 更新日期: 2023-09-27 18:12:30

我有一定数量的主题，我想在页面加载时在彼此相邻的列中显示。我尝试使用模运算符来实现这一点，但主题仍然显示在一个长列表中。

如何在列中相邻地显示这些元素?

这是我到目前为止所尝试的。

int rows = 50;
        for (int i = 0; i < rows; i++)
        {
            if (i % 9 == 0)
            {
                topicGenerator.InnerHtml += "<div class='topicGenSpacing'><ul>";
            }
            topicGenerator.InnerHtml += "<li>topic</li>";
            if (i % 9 == 8)
            {
                topicGenerator.InnerHtml += "</ul></div>";
            }
        }

<div class="topicList">
            <img src="Images/humanBig.jpg" alt="Health and Safety" />
            <div id="topicGenerator" runat="server">
             </div>
            <img src="Images/safetyBig.jpg" alt="Health and Safety" />

            <img src="Images/educationBig.jpg" alt="Health and Safety" />
        </div>

显示& lt; li>列中的元素

您需要将li样式设置为display: inline;。

li是一个元素，默认display为block，这意味着列表元素(li)将出现在另一个(您当前的情况)之下。

这个问题我不是很清楚，但是你可以在CSS中使用float 

float:left;

那么，在你的代码中使用这个，你可以这样做:

        {
            topicGenerator.InnerHtml += "<div class='topicGenSpacing'><ul>
        }
        topicGenerator.InnerHtml += "<li>topic</li>";
        if (i % 9 == 8)
        {
            topicGenerator.InnerHtml += "</ul></div>";
        }

， CSS是

.topicGenSpacing
{
    float:left;
}
作为题外话，如果您转义它们而不需要依赖单引号，则可以使用use引号。如
<div class='topicGenSpacing'>

是

<div class='"topicGenSpacing'">

转换成

<div class="topicGenSpacing">
相关文章：