Question

我正在尝试使用css类来模仿HTML表，但是最后一个＆＃34;单元格＆＃34;元素总是被推到下一行。

我目前解决这个问题的方法是将最后一个元素的宽度减少几个百分点，这样元素的总宽度就增加了~97％。这可以保护最后一个元素不会被推到下一行，但它看起来并不好看，因为它的末尾有未使用的空间。

有没有办法让表格单元格很好地排列并使用100％的包含宽度？

＆＃13;

.cell {
  display: inline-block;
}

＆＃13;

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div>
    <div class="cell" style="width:40%">First Name</div>
    <div class="cell" style="width:20%">Age</div>
  </div>
</div>

＆＃13;

Answer 1

我有2个解决方案。

第一个解决方案是

＆＃13;

.row{
  font-size: 0;
}

.cell {
  display: inline-block;
  font-size: 14px;
}

＆＃13;

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div>
    <div class="cell" style="width:40%">First Name</div>
    <div class="cell" style="width:20%">Age</div>
  </div>
</div>

＆＃13;

只需将font-size:0设置为父div。

但我不喜欢这个解决方案。

第二个解决方案是

＆＃13;

.row{
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
}
.cell {
  /* display: inline-block; It's not require */
  font-size: 14px;
}

＆＃13;

<div class="table" style="width: 100%">
    <div class="row" style="width: 100%">
        <div class="cell" style="width:40%">Last Name</div>
        <div class="cell" style="width:40%">First Name</div>
        <div class="cell" style="width:20%">Age</div>
    </div>
</div>

＆＃13;

我建议你display:flex。

如果您想了解flex，可以在Google轻松找到它。

Answer 2

这是一个众所周知的问题＆＃34;与display:inline-block;

一个解决方案是评论＆＃34;空间＆＃34;在你的div之间。存在其他解决方案，您应该看看这个问题：How to remove the space between inline-block elements?

＆＃13;

.cell {
  display: inline-block;
}

＆＃13;

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div><!--
    --><div class="cell" style="width:40%">First Name</div><!--
    --><div class="cell" style="width:20%">Age</div>
  </div>
</div>

＆＃13;

Answer 3

虽然我赞赏您使用语义正确的标记，但如果您正在显示表格类型数据，那么这应该使用表格。

有没有办法让内联块元素像表格单元格一样？

3 个答案: