我可以在一个td内显示30个div内联吗？

Question

我用html和css制作了一个日历。

我每30分钟有一次td。

但是我想在每分钟内在td内创建30个div。

现在它显示如下：

http://jsfiddle.net/mausami/FHfjL/1/

但我想在一行中显示每个div。

显示我在每个div中写的每个div。

div是这样的：

 <div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>

有人可以帮助我吗？

Answer 1

首先，对您的代码进行一些重要改进。

• Class names cannot start with a number.。快速修复是将一些字符串附加到它们的开头 - 我使用了“min _”。
• 您有多次id次。 id应该只使用一次。
• 将所有样式移到外部 - 内联执行，很难更新。
• 您不是float任何事情，因此您不需要clear:both;

这与你的相同，但漂亮的代码：http://jsfiddle.net/daCrosby/FHfjL/7/

---

现在，你的问题。 “[我如何]在一行中显示每个div？”我不太确定你是否希望每个div在一行（总共30行），或者每个div在同一行（总共只有1行）。所以这里有两种方式：

要在其自己的行上显示每个div：

.tbDay div{
    display:block;
}

http://jsfiddle.net/daCrosby/FHfjL/8/

在一行中显示全部30个：

.tbDay div{
    display:inline-block;
    width:3.333333%; /* 100% divided by 30 divs */
    margin-left:-4px;
}

请注意margin-left:-4px;。这是对内联块元素as discussed here之间间距的修复。

http://jsfiddle.net/daCrosby/FHfjL/9/

Answer 2

如果您想使用这些div来显示经过的时间，

你可以在背景中使用渐变和％，甚至更好<meter></meter> http://www.w3.org/wiki/HTML/Elements/meter
您可以轻松地从js或服务器端脚本填写正确的值来更新您的日历。

欢呼声

Answer 3

如果要显示clear:both，为什么要inline-block？只需删除该样式规则，它应该按预期工作。

Answer 4

您将分钟显示为display:inline-block

将其更改为block或将其完全删除。还要考虑使用列表而不是div。

修改 上面的答案假设＆＃34;每个div在一个新的行＆＃34;意思是一分钟div =一个新线 根据以下评论中的说明，要使td中的所有div显示在一行中，请应用white-space:nowrap

e.g。将以下内容插入小提琴的css部分：

#tblDay td{
    white-space:nowrap;
}

Answer 5

当您设置display:inline-block时，该元素有效地表现为单个文本字符，您可以将其视为块。

除此之外，这意味着如果没有足够的空间，它将换行到新的一行。

要解决此问题，请将white-space:nowrap添加到容器元素中。 （可选）将white-space:normal添加到内联块div。

我还建议将CSS规则定义为：

.tdDay {white-space:nowrap}
.tbDay>div {
    display:inline-block;
    white-space:normal;
}