Question

我正在尝试使用CSS / HTML和JavaScript制作虚拟骰子（用于玩骰子）......我的JavaScript部分正在运行，但我似乎无法让HTML / CSS以我想要的方式显示它（不创建无边框表并将每个点放在单元格中）。我做了以下JSfiddle：http://jsfiddle.net/ShoeMaker/KwBaN/5/当你得到4,5或6时你可以看到我的问题..

我想得到一个带有一组方括号[]的模拟裸片，里面有正确的点数。 1.中间应该有一个点 2.左上角应该有一个点，右下角应该有一个点 3.应该在左上角有一个点，在中间中间有一个点，在右下角有一个点 4.应该在左上角，右上角，左下角和右下角有一个 5.应该在左上角，右上角，中间中间，左下角和右下角有一个 6.顶部应有三个，底部应有三个（左侧三个，右侧三个）。

我考虑过创建一个无边框表，但我想首先尝试使用block / inline和super / sub。我不想显示图像（不允许）。他们只需要显示最终结果，而不是闪烁并假装滚动（虽然将来可能很酷）。我不在乎使用ASCII字符等使它们“数字化”。（过于传统，像模拟骰子）。

我的小提琴中的任何想法都不符合我的意图？

一些小小的附加说明......

我可能希望将来使用“非标准”骰子（那些有7,9,12,20，两侧），需要很容易适应（使用“：”不要不行。）
希望它相对较小（每个模具不应占用屏幕的1/8（Yahtzee需要超过屏幕的一半！）

Answer 1

有几件事。

Span元素已经是内联元素，因此您无需在css中指定。

请注意，您的“行”元素现在包装在显示样式为“inline-block”的父容器中。内部元素被更改为block个元素，因为您希望它们“堆叠”在一起，以达到您想要的效果。

<span class="bracket">[</span>
<div id="die">
    <div id="TopRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="MidRow">&nbsp;&nbsp;&nbsp;</div>
    <div id="BotRow">&nbsp;&nbsp;&nbsp;</div>
</div>
<span class="bracket">]</span>

#die {
    display: inline-block; 
    padding: 5px;             
}

span.bracket {
    font-size: 95px;       
}

#TopRow, #MidRow, #BotRow {
    font-weight: bold;           
}

更新了小提琴：http://jsfiddle.net/KwBaN/11/

修改：根据你的评论，这里是另一个让“死”变得更小的更新：

div { padding: 0; margin: 0; } #die { display: inline-block; } span.bracket { font-size: 40px; } #TopRow, #MidRow, #BotRow { font-weight: bold; font-size: 12px; line-height: 8px; }

另一个更新的小提琴：http://jsfiddle.net/KwBaN/34/

Answer 2

我做了一些html和css，结果就在这里 -

http://jsfiddle.net/ashwyn/KwBaN/21/

修改：
内联css更新了小提琴。
http://jsfiddle.net/ashwyn/KwBaN/36/

Answer 3

HTML：

<span>[</span>
<div style="display:inline-block;">
    <div id='top'></div>
    <div id='mid'></div>
    <div id='bot'></div>
</div>
<span>]</span>

只需将字体大小添加到内容并使id正确，它应该可以正常工作。它在彼此正上方的三行上显示点。也许弄乱line-height以使其漂亮。

Answer 4

这样的概念？

http://jsfiddle.net/NuRKL/12/

如何使用html和css创建虚拟骰子（用于玩骰子）？

4 个答案: