在 css 中使用时,我很难理解表格和表格单元格的性质。
请考虑以下内容:http://jsfiddle.net/dd7h7/3/ .
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
我试图制作一个包含一些按钮的小部件,这些按钮彼此并排放置。但是我不明白红框之间的空间是从哪里来的。我该如何摆脱它?
谢谢
最佳答案
内联元素(在您的例子中是 .button div)对空白很敏感,您可以通过多种方式摆脱空白,包括:
- 删除元素之间的空格
- 使用 HTML 注释 (
<!-- -->
) 填补空白 - 向左浮动元素
移除元素间空白的示例:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
使用 HTML 注释的示例:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
使用 float 示例:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
所以简而言之,这实际上与 display:table-cell 无关,而是与 display:inline 和 inline-block 相关。
关于html - 不需要的间距与 css 显示和表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24454019/