Question

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

如何在彼此相邻的列中显示这些元素？

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

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>

Answer 1

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

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

Answer 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">

在列</li>中显示<li>元素

2 个答案: