1

私はHTMLとCSSが初めてです。複数のテーブルを作成し、それらをすべてボックス内の 1 行に表示したいと考えています。次のことを試しましたが、うまくいかないようです。誰かがこれを修正できますか？これは私のCSSコードです:

#content2{
   margin: 30px 0;
   background: white;
   padding: 20px;
   clear: both;
   box-shadow: 0px 1px 1px #999;
   text-align: center;
   overflow:hidden;

}

table{
  margin-right: auto;
  margin-left: auto;
  float:left;
}
td,th{
  padding: 20px;
}

HTML は正しいはずです。

4

2 に答える 2

1

を使用する代わりに、を使用しfloat: leftてテーブルをインラインで表示します。display: inline-block

例

tableこれにより、要素がデフォルトの全幅にならないようになることを知っておいてください（おそらく最初からやりたくないでしょう）。

于 2013-10-16T09:26:12.537 に答える
0

私が知っているいくつかのオプションがあります。

1. 純粋な CSS と「動的」(つまり、事前に幅がわからない) が必要な場合は、テーブルを設定しdisplay: inline-blockてフロートを削除できます。これは chrome で動作しますが、IE、特に古いバージョンでは問題が発生する可能性があります。

http://jsfiddle.net/ZfX2M/

2. 幅がわかっている場合は、その幅で内部コンテンツ div を設定しmargin:autoます。

http://jsfiddle.net/AuF7z/1/

3. 幅がわからないが、JS を使用して満足している場合は、上記と同じことを行いますが、JS で幅を計算します (以前は jQuery を使用していましたが、生の JS を使用できます)。

http://jsfiddle.net/mVADm/1/

于 2013-10-16T09:33:11.010 に答える