CSS里面一个正方形的颜色

Question

我试图在HTML + CSS中实现以下结构：

我在另一个帖子中读到，在水平方向上实现正方形的一种简单方法是：

HTML

<table>
    <th>
        <td>&#9633;</td>
    </th>
    <th>
         <td>&#9633;</td>
    </th>
    <th>
        <td>&#9633;</td>
    </th>
</table>

CSS

td {
    font-size: 5em;
}

但是如何填充块的内部颜色并减少块之间的分离以便它们一起？

Answer 1

背景渐变可用于内容与否的父级。

我知道你要删除黑色边框

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用表格可以这样做：

＆＃13;

＆＃13;

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;      
}

＆＃13;

<table>
    <tr>
        <td class="yellow"></td>
        <td class="red"></td>
        <td class="green"></td>
        <td class="orange"></td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

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;
}

＆＃13;

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"></td>
        <td class="blue"></td>
    <tr>
</table>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/YameenYasin/cx1ka3Ly/

Answer 4

试试这个：

 

.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>

Answer 5

试试这个：

.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>

Answer 6

你有必要使用桌子吗？如果没有，这是一个使用不同方法的片段。

.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>

Answer 7

如果你想坚守桌子，你可以这样做：

＆＃13;

＆＃13;

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;
}

＆＃13;

<table>
  <tr>
    <td class="green"></td>
    <td class="red"></td>
    <td class="blue"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;