Cursor movement

HTML & CSS
42

Ok. Thanks

43

As in Post 33, how would you get type to appear under the boxes?
Thanks

44

Look at the html in Paul’s codepen from post 33.
The text is in a <p> tag, which by default is a block level element.
It is located out side of the flex container that contains the boxes. So the <p> tag is displaying below the boxes on it’s own line (a new block) because it comes lower in the html source.

2 Likes
45

So how do you make the result “You are Correct” from posts 6 and 12 appear at the bottom of boxes instead of on the side and then the instructions, “Use the baspckspace…”
Thanks

46

Move them outside of the clue-box div.

<h1>CLUE:</h1>
<h2> ...and Stripes</h2>
<div class="clue-box">
  <input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
</div><!--end clue-box-->

<div id="result"></div>
<p>Use Backspace to delete each letter in turn.</p>
1 Like
47

Wow!!
Thanks

1 Like
48

A post was split to a new topic: Aligning items

49

A post was split to a new topic: Adding a “hint” button to puzzle