如何使两个表行之间的空间更小css
Posted
技术标签:
【中文标题】如何使两个表行之间的空间更小css【英文标题】：How to make space between two table rows smaller css 【发布时间】：2017-09-14 00:25:29 【问题描述】：我希望我的文本和我的图标彼此更小。它们分为 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>【问题讨论】：
【参考方案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 做了一些小的修改。
【讨论】：
您好，首先感谢您的帮助。我是初学者，这可能就是为什么有这么多错误的原因。我会更新它并告诉你它是如何工作的。 我已经更新了答案中的代码。如果您想获得完整的代码以便查看上下文，请询问。再次感谢您的帮助 是的，这更好，但仍然不理想。如果这些图标和图标文本将被单击以将用户带到另一个页面，那么最好将它们作为链接 (<a>)。查看我更新的答案，我已将其转换为可以运行查看的 sn-p。如您所见，它看起来像您的，但使用链接元素而不是表单输入使其在语义上更正确。
感谢您的帮助！我改变了它，这就是我现在想要的！【参考方案2】：
如果我这样做会更好吗？
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>【讨论】：
以上是关于如何使两个表行之间的空间更小css的主要内容，如果未能解决你的问题，请参考以下文章