显示Div元素彼此相邻

时间：2017-01-07 23:57:03

标签： html css

我正在寻找一个简单的刽子手游戏，我坚持这一步。 我试图在水平线上显示字母表，并使每个字母都可以点击。这是我现在在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之间的区别感到有点困惑。

3 个答案:

答案 0 :(得分：3)

您只需要将包装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 }

您可以使用相同的elements多个class，而element可以有多个classes（由空格分隔），其中ids应为{每个unique和element的{​​1}}只能包含1个elements

答案 1 :(得分：1)

回答您的疑问，关于ID与班级的问题，您可以阅读这篇精彩的文章The differences between ID and class

其中一个最大的区别是：

ID是独一无二的 - 类不是独一无二的

关注您的问题

你需要内联你的字母，因为你正在使用div - 这是一个块级元素 - 所以这样做的方法设置为inline-block。

修改

  

非常感谢你。这样可行。我现在如何移动整个元素   到屏幕上的特定位置。通常的选择似乎并非如此   工作。当我使用右，上，下，它使字母垂直   试。

该代码段已更新，您可以使用position:relative/absolute

实现该功能

＆＃13;
＆＃13; 
#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 
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我会这样做。每个元素都有其click事件。如果使用jQ动态创建每个元素，它也可以更简化。

＆＃13;
＆＃13; 
$(".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);
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题