私は現在Zurb-Foundation 4と一緒に作業していますが、大規模な12行のブロックグリッドを中央に配置しようとすると問題に直面しました。
ここに私のコードです:
<div class="row" id="boardcontainer">
<div class="small-12 large-12 large-centered columns">
<ul class="small-block-grid-3 large-block-grid-3 text-center" id="board">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
私は常に左揃えの3x3グリッドを取得します。私はちょうどこのグリッドを大きな12行に集中させたいと思っています。私は、私のli要素には固定幅と固定高さが与えられていることに言及する必要があります。
これは、大規模な12行内のグリッドブロックを使用して可能ですか?
アップデート:小さなjsbinの例を作成しました: http://jsbin.com/EwOZ/1
回答:
回答№1は4追加する display: inline-block
あなたの ul
要素の幅を変更します li
要素を width:98px;
.
ここでは、 jsFiddle それを実際に示している。