6

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

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

我曾考虑过创建一个无边框表，但我想先尝试使用块/内联和超级/子。我不想显示图像（不允许）。他们只需要显示最终结果，而不是闪烁并假装滚动（尽管将来可能会很酷）。我不在乎使用 ASCII 字符或类似字符使它们“数字化”。（太传统了，比如模拟骰子）。

我的小提琴有什么想法没有按我的意愿工作吗？

几个小的附加说明......

  • 将来我可能想将其与“非标准”骰子（具有 7、9、12、20、??? 面的骰子）一起使用，需要易于适应（使用“：”不起作用）。

  • 希望它相对较小（每个骰子不应该占据屏幕的 1/8（Yahtzee 会占据屏幕的一半以上！））

4

4 回答 4

3

有几件事。

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

请注意，您的“行”元素现在包装在具有“内联块”显示样式的父容器中。内部元素被更改为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/ ​</p>

于 2012-06-13T05:22:36.887 回答
2

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

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

编辑：
使用内联 css 更新小提琴。
http://jsfiddle.net/ashwyn/KwBaN/36/

于 2012-06-13T05:22:38.577 回答
1

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以使其漂亮。

于 2012-06-13T05:16:37.553 回答
0

这样的概念？

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

于 2012-06-13T05:21:50.130 回答