1

私はこのようなものを作成しようとしています:

http://i.stack.imgur.com/aabn9.png

しかし、foreach ループ内で作成する必要があるため、問題があります。

これは私が今持っている方法ですが、私のイメージのようにする方法がわからないイメージのようではありません.

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {

              <a href="#" class="box"></a>
              <p>@(counter++)</p>

          }               
  }

CSS:

。箱

{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    float: left;     
}

誰かが私を助けてくれたら、とても感謝します。

4

4 に答える 4

0

タグが必要かどうかはわかりませんが<p>、カウンターを<a>タグ内に配置して (ボックスの単なるインデックスになると思います)、display:block; を配置するだけです。.box CSS で、タグが正方形として表示されるようにします。

それを明確にするために、次のCSSが必要です

.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

編集：申し訳ありませんが、四角の下にカウンターがあることに気づきました。このシナリオでは、次のように div ラッパーでタグをラップする方が簡単です。

<div class="wrapper">
   <a href="#" class="box"></a>
   <p>@(counter++)</p>
</div>

次のように、ラッパー クラスに text-align:center を指定します。

.wrapper 
{
    text-align:center;
    float: left;
}

(これらはすべて、上記の .box クラスの横にあります。)

これが役立つことを願っています。

編集： sandeepのコメントにより、フロートをボックスクラスからラッパーに移動する必要もあります。

于 2012-04-24T11:20:02.563 に答える
0

次のように html を定義する必要があります。

HTML

<div class="wrapper">
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
</div>

CSS

.wrapper{
  text-align:center;
}

.parent{
  display:inline-block;
  *display:inline;/*For IE*/
  *zoom:1;
  text-align:center;
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

JS

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="parent" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }
于 2012-04-24T11:26:47.043 に答える
0

あなたの問題は<p>段落タグにあると思います。各ボックスの後に改行が含まれます。

于 2012-04-24T11:20:54.020 に答える
0

2つをまとめて箱に入れます。

このような：

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="lefty" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }

CSS:

.lefty
{
    float: left;     
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;  
}

残りはあなた次第です。たとえば、テキストを中央に揃えます。

于 2012-04-24T11:25:03.127 に答える