0

ページの読み込み時に隣同士の列に表示したいトピックが一定数あります。これを達成するためにモジュラス演算子を使用しようとしましたが、代わりにトピックが 1 つの長いリストに表示されます。

これらの要素を隣り合わせの列に表示するにはどうすればよいですか?

これは私がこれまでに試したことです。

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

liasのスタイルを設定する必要がありますdisplay: inline;。

これは、リスト要素（ ）が上下に表示されることを意味するデフォルトをli持つ要素です（現在のケース）。displayblockli

于 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 に答える