0
私のテキストと私のアイコンはお互いに小さくしたいと思っています。それらは3つのセルごとに2つの行に分かれています。また、高さと幅が反応し、正方形から長方形に変わらないようにするにはどうすればよいですか？2つのテーブル行の間のスペースを小さくする方法
@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>
こんにちは、助けのためのすべての感謝の最初の。私はおそらく非常に多くの間違いが起きているスターターだ。私はそれを更新し、それがどのように動作するかをお知らせします。 –
答えのコードを更新しました。コンテキストを見ることができるように完全なコードを表示したい場合は、尋ねてください。助けてくれてありがとう –
はい、それは良いですが、まだ理想的ではありません。これらのアイコンとアイコンテキストをクリックして別のページに移動させると、それらがリンク（ ' '）であることが最善です。私の更新された回答を参照してください。これを表示するために実行できるスニペットになっています。ご覧のように、あなたのように見えますが、フォーム入力の代わりにリンク要素を使用すると、意味的に正しいものになります。 –