最大のものから最小のものまでcss:5個の円を使って描画したい。ブラウザのウィンドウを縮小しても、5つのサークルがページの幅を占めるようにします。 css異なるサイズの円を含む四角形のテーブル
.main-circle-block {
border: 2px solid blue;
}
.main-circle-block table {
width: 100%;
border: 2px solid red;
}
.main-circle-block td {
border: 2px solid green;
//border-radius: 50% (just to make them into circles)
width: 20%;
padding-top: 20%;
}
<div class="main-circle-block inside-main">
<table>
<thead>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
私は彼らに私は、TDタグ内たかったが、彼らはちょうど私も「パディングトップなしのdivのテーブルを作ってみました。この前
を押しつぶしてしまっサイズ/ボーダー半径を与え、divタグを入れてみました:20% "のタグが付いていますが、ブラウザのサイズを変更すると円が楕円に変わります。
li要素を表示する水平リストを使ってみました:inline-block;しかし、それは動作しませんでした(私はブラウザのサイズを変更したときに、サークルが周りにポップし、連続していない)
- テーブルタグを使って何をしたいですか?
- もう一度水平リストを考慮する必要がありますか?
私は似たような質問をしますが、私の質問に正確には答えません。
このようなアプリケーションでは、テーブルを使用するか、リストを使用するか、単に5つの 'タグを使用するのは良い方法ではありません。 – hcheung