在列中显示 <li> 元素答案

【问题标题】：displaying <li> elements in columns在列中显示 <li> 元素
【发布时间】：2013-05-02 08:59:58
【问题描述】：

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

如何在列中并排显示这些元素？

这是我迄今为止尝试过的。

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>

【问题讨论】：

标签： c# html webforms

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这个问题我不是很清楚，但你可以在 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;
}

顺便说一句，如果您将引号转义为不需要依赖单引号，则可以使用引号。 EG

<div class='topicGenSpacing'>

变成

<div class=\"topicGenSpacing\">

这将转化为

<div class="topicGenSpacing">

【讨论】：

.topicGenSpacing 类应该在那里使用而不是新的.menu