javascript - Bagaimana saya bisa membuat dadu virtual (untuk bermain dadu) menggunakan html dan css?

Saya sedang mencoba membuat dadu virtual (untuk bermain dadu) menggunakan CSS/HTML dan JavaScript... Bagian JavaScript saya bekerja, tetapi saya sepertinya tidak bisa membuat HTML/CSS menampilkannya seperti yang saya inginkan (tanpa membuat tabel tanpa border dan menempatkan setiap titik di dalam sel). Saya membuat JSfiddle berikut: http://jsfiddle.net/ShoeMaker/KwBaN/5/ dan ketika Anda mendapatkan angka 4, 5, atau 6, Anda bisa melihat masalah saya..

Saya ingin mendapatkan dadu analog dengan satu set tanda kurung kotak [ ] dengan jumlah titik yang benar di dalamnya. 1. harus memiliki satu titik di tengah-tengah 2. harus memiliki satu titik di kiri atas dan satu di kanan bawah 3. harus memiliki satu titik di kiri atas, satu di tengah-tengah, dan satu di kanan bawah 4. harus memiliki satu di kiri atas, kanan atas, kiri bawah, dan kanan bawah 5. harus memiliki satu di kiri atas, kanan atas, tengah-tengah, kiri bawah, dan kanan bawah 6. harus memiliki tiga di sepanjang atas dan tiga di sepanjang bawah (atau tiga di sepanjang sisi kiri dan tiga di sepanjang sisi kanan).

Saya telah mempertimbangkan untuk membuat tabel tanpa batas, tetapi saya ingin mencoba melakukannya dengan block/inline dan super/sub terlebih dahulu. Saya TIDAK ingin menampilkan gambar (tidak diperbolehkan). Mereka hanya perlu menampilkan hasil akhirnya, tanpa berkedip dan pura-pura bergulir (meskipun itu mungkin keren di masa depan). Saya tidak peduli membuatnya 'digital' menggunakan karakter ASCII atau sejenisnya. (Terlalu tradisional, seperti dadu analog).

Ada ide kenapa fiddle saya tidak berfungsi seperti yang saya inginkan?

Beberapa catatan tambahan minor...

Saya mungkin ingin menggunakan ini dengan dadu "non-standar" (yang memiliki 7, 9, 12, 20, ??? sisi) di masa depan, perlu mudah disesuaikan (Menggunakan ":" tidak berhasil).
Ingin ukurannya relatif kecil (Seharusnya tidak mengambil 1/8 layar per dadu (Yahtzee akan mengambil lebih dari setengah layar!))

Jawaban #1

Beberapa hal.

Elemen span sudah merupakan elemen inline sehingga Anda tidak perlu menyatakannya dalam CSS Anda.

Perhatikan, bahwa elemen "row" Anda sekarang dibungkus dalam wadah induk dengan gaya tampilan "inline-block". Elemen-elemen di dalamnya diubah menjadi elemen block karena Anda ingin mereka "ditumpuk" satu sama lain untuk mencapai efek yang diinginkan.

<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;           
}

Fiddle yang diperbarui: http://jsfiddle.net/KwBaN/11/

EDIT: Sesuai komentar Anda, berikut pembaruan lain untuk membuat "die" sedikit lebih kecil:

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;    
}

fiddle yang diperbarui lainnya: http://jsfiddle.net/KwBaN/34/

Jawaban #2

Saya membuat beberapa HTML dan CSS dan hasilnya ada di sini -

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

Edit:
Fiddle yang diperbarui dengan CSS inline.
http://jsfiddle.net/ashwyn/KwBaN/36/