相邻显示Div元素

Question

I'm looking to make a simple game of hangman, and am stuck at this step. I'm trying to display the alphabet in a horizontal line and make each letter clickable. Here is what I have right now in my html file.

 #letters { height: 10%; width: 50%; right: 30%; display: inline-block; } 

 <p1> Guess the Word in 5 or less guesses <br>Click on each letter to guess the word </p1> <div id="letters"> <div id="a"> <p>a</p> </div> <div id="b"> <p>b</p> </div> <div id="c"> <p>c</p> </div> <div id="d"> <p>d</p> </div> <div id="e"> <p>e</p> </div> <div id="f"> <p>f</p> </div> <div id="g"> <p>g</p> </div> <div id="h"> <p>h</p> </div> <div id="i"> <p>i</p> </div> <div id="j"> <p>j</p> </div> <div id="k"> <p>k</p> </div> <div id="l"> <p>l</p> </div> <div id="m"> <p>m</p> </div> <div id="n"> <p>n</p> </div> <div id="o"> <p>o</p> </div> <div id="p"> <p>p</p> </div> <div id="q"> <p>q</p> </div> <div id="r"> <p>r</p> </div> <div id="s"> <p>s</p> </div> <div id="t"> <p>t</p> </div> <div id="u"> <p>u</p> </div> <div id="v"> <p>v</p> </div> <div id="w"> <p>w</p> </div> <div id="x"> <p>x</p> </div> <div id="y"> <p>y</p> </div> <div id="z"> <p>z</p> </div> </div> <div id="spots"> <p>_ _ _ _ _ _</p> </div> 

I've looked at other posts, but they don't seem to solve my problem.

Also I'm a bit confused on the difference between a div class and a div id .

Answer 1

You are only making the wrapping div inline-block you need to apply this style to each of the letters.

You could do this by adding a class to all of the letters such as:

<div id="a" class="letter">a</div>
<div id="b" class="letter">b</div>

Then in your css apply inline-block

.letter{ display: inline-block }

You could also do this without the classes like so:

#letters > div { display: inline-block }

You can have multiple elements using the same class and an element can have multiple classes (separated by spaces) where as ids should be unique for each element and elements may only contain 1 id

Answer 2

Answering your doubt, regards to ID vs Class you can read this great article The differences between ID and class

Where one of the big difference is:

ID IS UNIQUE - CLASS ARE NOT UNIQUE

---

Regards to your issue in hand

you need to make your letters inline, because you are using div - which is a block level element - so a way to do that is set to inline-block to it.

---

EDIT

Great thank you. That works. How would I now move this whole element to a specific spot on the screen. The usual options don't seem to work. When I use right, top, bottom, it makes the letters go vertical again.

the snippet was updated, you can achieve that using position:relative/absolute

 #letters > div { display: inline-block; } .hangman-game-wrap { position: relative; } /*move the game here*/ .hangman-game { position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; /*change the width as you wish*/ width: 300px } 

 <div class="hangman-game-wrap"> <div class="hangman-game"> <p1> Guess the Word in 5 or less guesses <br>Click on each letter to guess the word </p1> <div id="letters"> <div id="a"> <p>a</p> </div> <div id="b"> <p>b</p> </div> <div id="c"> <p>c</p> </div> <div id="d"> <p>d</p> </div> <div id="e"> <p>e</p> </div> <div id="f"> <p>f</p> </div> <div id="g"> <p>g</p> </div> <div id="h"> <p>h</p> </div> <div id="i"> <p>i</p> </div> <div id="j"> <p>j</p> </div> <div id="k"> <p>k</p> </div> <div id="l"> <p>l</p> </div> <div id="m"> <p>m</p> </div> <div id="n"> <p>n</p> </div> <div id="o"> <p>o</p> </div> <div id="p"> <p>p</p> </div> <div id="q"> <p>q</p> </div> <div id="r"> <p>r</p> </div> <div id="s"> <p>s</p> </div> <div id="t"> <p>t</p> </div> <div id="u"> <p>u</p> </div> <div id="v"> <p>v</p> </div> <div id="w"> <p>w</p> </div> <div id="x"> <p>x</p> </div> <div id="y"> <p>y</p> </div> <div id="z"> <p>z</p> </div> </div> <div id="spots"> <p>_ _ _ _ _ _</p> </div> </div> </div> 

Answer 3

I would do it like this. Each element has its click event. Also it can be simplified even more if you create each element dynamicaly using jQ.

 $(".letter").each(function() { // gets id from attribute var letter = $(this).attr("id"); // create element <p> inside .letter $(this).append("<p>" + letter + "</p>"); // assign click event for each .letter $(this).on("click", function() { // TO DO when clicked $("#letterClicked").text("Clicked " + letter); }); }); 

 #letters{ height: 10%; width: 100%; right: 30%; display: flex; justify-content: flex-start; align-items: center; } .letter { background: black; color: white; width: 30px; height: 30px; margin: 1px; display: flex; justify-content: center; align-items: center; } 

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div id="letters"> <div class="letter" id="a"></div> <div class="letter" id="b"></div> <div class="letter" id="c"></div> <div class="letter" id="d"></div> <div class="letter" id="e"></div> <div class="letter" id="f"></div> <div class="letter" id="g"></div> <div class="letter" id="h"></div> <div class="letter" id="i"></div> <div class="letter" id="j"></div> <div class="letter" id="k"></div> <div class="letter" id="l"></div> <div class="letter" id="m"></div> <div class="letter" id="n"></div> <div class="letter" id="o"></div> <div class="letter" id="p"></div> <div class="letter" id="q"></div> <div class="letter" id="r"></div> <div class="letter" id="s"></div> <div class="letter" id="t"></div> <div class="letter" id="u"></div> <div class="letter" id="v"></div> <div class="letter" id="w"></div> <div class="letter" id="x"></div> <div class="letter" id="y"></div> <div class="letter" id="z"></div> </div> <div id="letterClicked"></div>