0

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

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

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

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>
4

2 回答 2

1

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

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

于 2013-05-08T07:57:10.017 回答
1

这个问题对我来说并不完全清楚，但你可以float在 CSS中使用

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;
}

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

<div class='topicGenSpacing'>

变成

<div class=\"topicGenSpacing\">

这将转化为

<div class="topicGenSpacing">
于 2013-05-08T07:57:41.720 回答