如何在两个表行之间留出较小的css空间

时间：2017-04-18 08:41:38

标签： html css html-table responsive

我希望我的文字和我的图标彼此之间相距较小。它们分为2行，每3个单元格。另外，如何使高度和宽度响应并且不会从正方形变为矩形？ 

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}
<table align="center">
  <tr>
    <h1>
    <td class="icon" id="afspraken">Icoon1</td>
    <td class="icon">Icoon2</td>
    <td class="icon">Icoon3</td>

  </tr>
  <tr>
      <td class="icontext">Afspraken</td>
      <td class="icontext">Grenzen</td>
      <td class="icontext">Situaties</td>
  </tr>
</table>

2 个答案:

答案 0 :(得分：1)

我不知道你实现这个的上下文所以不会批评你选择<table>来布置这些图标。

虽然使用表格单元格作为图标，但这是一个坏主意。更好的选择是在其中设置元素的样式。我使用<span>来做here。 

    html{
      height: 100%;
    }

    body{
      font-family: 'Fjalla One', sans-serif;
      background: #2C3E50;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .icon{
      text-decoration: none;
      cursor: pointer;
      display: block;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px transparent;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
      vertical-align: middle;
      color: white;
      border: 2px solid black;
      border-radius: 35px;
      width: 160px;
      height: 180px;
      margin: 10px;
      line-height: 180px;
      text-align: center;
      background: #007991;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .icon:hover, .icon:focus, .icon:active {
      box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }



    .icontext{
      text-align: center;
      color: white;
      font-size: 30px;
      text-decoration: none;
    }



    table {
        border-spacing: 60px;
        border-collapse: collapse;
        text-align: center;
    }
<table align="center">
  <tr>
      <td><a href="#" class="icon" id="afspraken">Icon1</a></td>
      <td><a href="#" class="icon">Icon2</a></td>
      <td><a href="#" class="icon">Icon3</a></td>
  </tr>
  <tr>
      <td><a href="#" class="icontext">Afspraken</a></td>
      <td><a href="#" class="icontext">Grenzen</a></td>
      <td><a href="#" class="icontext">Situaties</a></td>
  </tr>
</table>

请注意，如果我从头开始，我会做更多不同的事情。为了回答你的问题，我刚刚对你的标记和CSS做了一些小的修改。

答案 1 :(得分：0)

如果我这样做会更好吗？ 

html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.icon{
  cursor: pointer;
  display: block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  vertical-align: middle;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  width: 160px;
  height: 180px;
  margin: 10px;
  line-height: 180px;
  text-align: center;
  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: collapse;
    text-align: center;
}
<table align="center">
  <tr>
    <h1>
    <td><input type="button" class="icon" value="Icoon1") /></td>
    <td><input type="button" class="icon" value="Icoon2") /></td>
    <td><input type="button" class="icon" value="Icoon3") /></td>
  </tr>
  <tr>
      <td class="icontext">Afspraken</td>
      <td class="icontext">Grenzen</td>
      <td class="icontext">Situaties</td>
  </tr>
</table>

相关问题
最新问题