我想在HTML + CSS來實現以下結構的顏色：CSS裏面一個方形
我在另一個線程讀取，在水平實現平方的簡單方法是：
HTML
<table>
<th>
<td>□</td>
</th>
<th>
<td>□</td>
</th>
<th>
<td>□</td>
</th>
</table>
CSS
td {
font-size: 5em;
}
但是，如何填充塊的內部顏色，並減少塊之間的分隔，以便它們都在一起？
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.red{
background-color:#F15E66;
}
.yellow{
background-color:#FFDB64;
}
.orange{
background-color:#F58326;
}
.blue{
background-color:#85B1DE;
}<table>
<tr>
<td class="red"></td>
<td class="yellow"></td>
<td class="orange"></td>
<td class="blue"></td>
<tr>
</table>試試這個：
.redBg { background-color: red; }
.greeBg { background-color: green; }
.yelloBg { background-color: yellow; }
th { border: 2px; }
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 5px solid black;
}<table>
<tr><td class="redBg"></td>
<td class="greeBg"></td>
<td class="yelloBg"></td>
</table>試試這個：
.mainbox {
border: #000 solid 2px;
float: left;
}
.box {
width: 30px;
height: 30px;
border-right: #000 solid 2px;
float: left;
margin: 0px;
padding: 0px;
}
.box:last-child {
border: none;
}
.red {
background: #ff0000;
}
.orange {
background: #ff6600;
}
.blue {
background: #006699;
}<div class="mainbox">
<div class="box red"></div>
<div class="box orange"></div>
<div class="box blue"></div>
</div>http://jsfiddle.net/p4avg2c4/ – 2015-02-11 13:07:18
使用表格，你可以做這樣的：
table {
border-spacing: 0px;
border-collapse: collapse;
}
td {
width: 3em;
height: 3em;
border: 5px solid black;
}
.yellow{
background-color: yellow;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.orange {
background-color: orange;
}<table>
<tr>
<td class="yellow"></td>
<td class="red"></td>
<td class="green"></td>
<td class="orange"></td>
</tr>
</table>是你有必要使用表？如果不是，這是一個使用不同方法的片段。
.box-container {
background: #424244;
display: table;
}
.box {
height: 20px;
width: 20px;
display: table-cell;
}
.box:nth-child(1) {
background: #F15E66;
}
.box:nth-child(2) {
background: #FFDB64;
}
.box:nth-child(3) {
background: #F58326;
}
.box:nth-child(4) {
background: #85B1DE;
}<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>如果你想堅持的表，你可以做這樣的：
table {
border-collapse: collapse;
}
td {
font-size: 3em;
border: 3px solid black;
width: 50px;
height: 50px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}<table>
<tr>
<td class="green"></td>
<td class="red"></td>
<td class="blue"></td>
</tr>
</table>背景漸變可以在父即內容與否內部使用。
我明白你要刪除的黑色邊框
.squares.ib {
display:inline-block;
}
.squares.tb{
display:table;
}
.squares.b {
display:block;
}
.squares {
margin:5px;
width:100px;
background:linear-gradient(to right,
#F15E66 0%,
#F15E66 25%,
#FFDB64 25%,
#FFDB64 50%,
#F58326 50%,
#F58326 75%,
#85B1DE 75%,
#85B1DE 100%);
text-align:center;
text-shadow:0 0 1px white
}
div.squares:before {
content:'';
padding-top:25%;
display:inline-block;
vertical-align:middle;
}<div class="squares ib">inline-block</div>
<hr/>
<div class="squares tb"> table</div>
<hr/>
<div class="squares b">block</div>
<hr/>
<table class="squares">
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>
表應該用於顯示錶格數據，這似乎並不像tabluar數據，所以你應該考慮使用不同的標記。 – 2015-02-11 13:17:52
這些廣場是否設想容納任何內容，還是隻是一個空的視覺/圖片？ – 2015-02-11 13:18:17