html - 显示彼此相邻的 Div 元素

Question

我想制作一个简单的刽子手游戏，但卡在了这一步。我试图在水平线上显示字母表并使每个字母都可点击。这是我现在在我的 html 文件中的内容。

#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>

我看过其他帖子，但它们似乎没有解决我的问题。

此外，我对 div class 和 div id 之间的区别有点困惑。

Answer 1

您只是在制作包装 div inline-block，您需要将此样式应用于每个字母。

您可以通过向所有字母添加 class 来做到这一点，例如:

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

然后在你的css中应用inline-block

.letter{ display: inline-block }

你也可以在没有 classes 的情况下这样做:

#letters > div { display: inline-block }

您可以有多个使用相同类的元素，一个元素可以有多个类(由空格)，其中 ids 对于每个 element 应该是 unique 并且 elements 可能只包含 1 个 id