3

次のページ構造があります。

<span>content01</span>
<span>content02</span>
<span>content03</span>
<br/>
<span>content04</span>
<span>content05</span>
<span>content06</span>
<br/>
<span>content07</span>
<span>content08</span>
<span>content09</span>
<br/>
...

その結果、私のデータは 3 つの列を持つテーブルのように見えます。各spanタグの内容は、いくつかの単語です。しかし、すべての単語が異なり、長さが異なるため、これは曲がっているように見えます。そして、各行の列間の距離を同じにしたいです。私の問題は、タグを使用するか、それぞれを単一の でtableラップすることで簡単に解決できます。しかし、CSS を使用するだけで目的の結果を達成したいと考えています。これは可能ですか？たとえば、次を使用しようとしました。spandiv

span {
    width: 60px;
    height: 20px;
    padding: 40px;  
}

または、次のようにします。

span {
    width: 60px;
    height: 20px;
    margin: 40px;  
}

しかし、うまくいきません...

前もって感謝します！

4

4 に答える 4

5

span タグのdisplayプロパティは にする必要があります**inline-block**。これは、span タグがinlineデフォルトであり、ブロックとしても機能する必要があるためです。

したがって、次のように に変更inlineするだけです。inline-block

span {
    width: 60px;
    height: 20px;
    margin: 40px;
    display:inline-block;    
}

ライブデモ: http://jsfiddle.net/mAX59/

参照: http://reference.sitepoint.com/html/span

于 2012-06-22T11:50:30.270 に答える
1

プロパティを指定する必要がdisplay: inline-blockあり、そうすれば機能します。

注：タグは、ドキュメント内のインライン要素をグループ化するために使用され、インライン要素を設定または<span>設定することはできません。widthheight

于 2012-06-22T11:51:20.173 に答える
1

cssに挿入してみてください：

 .cell{
display:inline-block; width: 60px;
    }

そしてHTMLで

<span class="cell"></span>
于 2012-06-22T11:54:45.630 に答える
0

あなたの質問に対する答えは次のとおりwidthです。インライン要素では機能しません。あなたが今持っているスタイルに加えてあなたspanのスタイルを与えてください。display:inline-block

しかし、あなたの質問にはまだまだあります。テーブルを使いたくないというあなたの理由は曖昧であり、「テーブルは邪悪なので、テーブルを決して使わない」群衆に属しているように聞こえます。
その罠にはまらないでください。テーブルは良いです。テーブルは便利です！もちろん、それらは悪用される可能性がありますが、他の要素も悪用される可能性があります。あなたがしている方法は今、<br>要素の乱用です！

于 2012-06-22T11:54:33.903 に答える