代码之家  ›  专栏  ›  技术社区  ›  A.Jaasma

如何使div元素内联显示(其他版本)

  •  2
  • A.Jaasma  · 技术社区  · 9 年前

    我读到有人问了同样的问题,但布局/目的不同。。

    我似乎无法理解给出的答案,因为我的代码看起来实际上非常不同,因为我在div中使用了一个div,因为我将在未来的编码中需要这个。。

    我需要字词内联显示,但这样我仍然可以单独移动每一个,现在它们都在一行下面,像这样, http://prntscr.com/a0ivs5

    这是我的代码,

    body, html {
      margin-left: 10%;
      margin-right: 10%;
      padding: 0px;
      height: 100%;
      font-family: georgia, "Comic Sans MS";
      background-color: #f0f0f0;
    }
    
    header {
      height: 5%;
      border-bottom: thick solid grey;
    }
    
    .img {
      width: 25%;
      height: 30%;
      background-color:#f0f0f0;
      float: left;
    }
    .antwoord {
      float: left;
      width: 95%;
      height: 25px;
      background-color: white;
      border-style: solid;
      border-color: #000000;
      border-width: 4px;
    }
    
    .move1 {
    
    }
    .move2 {
      margin-top: 12.5%
    }
    .move4 {
    margin-top: 19%
    }
    .move5 {
    margin-top: 33.5%
    }
    .move6 {
    margin-top: 20.8%
    }
    .move7 {
    margin-top: 37.5%
    }
    
    .word {
      float: left;
    }
    
    footer {
        border-top: thick solid grey;
        height: 5%;
    }
    
    .points {
        float: right;
    }
    .container {
      width: 100%;
      height: 90%;
    }
    .igen {
      font-size: 25px;
      font-weight: bold;
    }
    .sprint {
      float: right;
    }
    .copyright {
      position: relative;
      bottom: 20px;
      left: 65px;
      font-size: 10px;
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Words</title>
    
        <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    
      <script>
    
      </script>
    
    </head>
    <body>
    
    <header>
     <span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen">&nbsp;igen</span>
     <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige:  &nbsp;&nbsp;&nbsp; 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 0</span>
    </header>
    
    <div class="container">
    
    
          <div class="img" id="img1">
              <div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div>
              <div class="move1"><div class="antwoord" id="antwoord1"></div></div>
          </div>
          <div class="img" id="img2">
              <div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div>
                <div class="move2"><div class="antwoord" id="antwoord2"></div></div>
          </div>
          <div class="img" id="img3">
              <div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div>
              <div class="move3"><div class="antwoord" id="antwoord3"></div></div>
          </div>
          <div class="img" id="img4">
              <div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div>
              <div class="move4"><div class="antwoord" id="antwoord4"></div></div>
          </div>
          <div class="img" id="img5">
              <div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div>
              <div class="move5"><div class="antwoord" id="antwoord5"></div></div>
          </div>
          <div class="img" id="img6">
              <div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div>
              <div class="move6"><div class="antwoord" id="antwoord6"></div></div>
          </div>
          <div class="img" id="img7">
              <div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div>
              <div class="move7"><div class="antwoord" id="antwoord7"></div></div>
              </div>
              <div class="img" id="img8">
                  <div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div>
              <div class="move8"><div class="antwoord" id="antwoord8"></div></div>
              </div>
    
    <div class="Word" id="word1">
      <div class="tekst" id="tekst1"> <p>Cat</p> </div>
    </div>
    <div class="Word" id="word2">
      <div class="tekst" id="tekst2"> <p>spoon</p> </div>
    </div>
    <div class="Word" id="word3">
      <div class="tekst" id="tekst3"> <p>meal</p> </div>
    </div>
    <div class="Word" id="word4">
      <div class="tekst" id="tekst4"> <p>passport</p> </div>
    </div>
    <div class="Word" id="word5">
      <div class="tekst" id="tekst5"> <p>egg</p> </div>
    </div>
    <div class="Word" id="word6">
      <div class="tekst" id="tekst6"> <p>beak</p> </div>
    </div>
    <div class="Word" id="word7">
      <div class="tekst" id="tekst7"> <p>tea</p> </div>
    </div>
    <div class="Word" id="word8">
      <div class="tekst" id="tekst8"> <p>milk</p> </div>
    </div>
    
    <footer>
    <img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
    <img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
    <center><span class="copyright"> &copy;2013 laerdansk / FC-Sprint&sup2; Leerbedrijf bronnen </span></center>
    </footer>
    
    </body>
    </html>

    我可能在我的代码中做了其他事情,但效率不是很高,但我还不知道另一种方法,我是编程新手。。

    这是一个小游戏,需要把单词放在图片下面的桌子上。。

    若有人对我有任何建议,当然也欢迎:D 提前谢谢!

    2 回复  |  直到 9 年前
        1
  •  2
  •   Aziz    9 年前

    请注意,CSS类名区分大小写, .word {...} 将不适用于 <div class="Word">...</div>

    不管怎样,你的话是用3 block level元素,您必须将它们全部内嵌才能获得所需的效果

    div.Word > div.tekst > p

    .Word, .Word .tekst, .Word p {
      display:inline;
    }
    

    jsFiddle

    body,
    html {
      margin-left: 10%;
      margin-right: 10%;
      padding: 0px;
      height: 100%;
      font-family: georgia, "Comic Sans MS";
      background-color: #f0f0f0;
    }
    
    .container {
      width: 100%;
      height: 90%;
    }
    
    .Word, .Word .tekst, .Word p {
      display:inline;
    }
    <div class="container">
    
      <div class="Word" id="word1">
        <div class="tekst" id="tekst1">
          <p>Cat</p>
        </div>
      </div>
      <div class="Word" id="word2">
        <div class="tekst" id="tekst2">
          <p>spoon</p>
        </div>
      </div>
      <div class="Word" id="word3">
        <div class="tekst" id="tekst3">
          <p>meal</p>
        </div>
      </div>
      <div class="Word" id="word4">
        <div class="tekst" id="tekst4">
          <p>passport</p>
        </div>
      </div>
      <div class="Word" id="word5">
        <div class="tekst" id="tekst5">
          <p>egg</p>
        </div>
      </div>
      <div class="Word" id="word6">
        <div class="tekst" id="tekst6">
          <p>beak</p>
        </div>
      </div>
      <div class="Word" id="word7">
        <div class="tekst" id="tekst7">
          <p>tea</p>
        </div>
      </div>
      <div class="Word" id="word8">
        <div class="tekst" id="tekst8">
          <p>milk</p>
        </div>
      </div>
    
    </div>

    另外,你有一些语法错误

        2
  •  2
  •   Timble    9 年前

    如果我理解你的问题,你的问题是你的“.word”类是小写的,而它在HTML中被引用为“word”。因此,请尝试将.word类更改为

    .Word { display: inline-block; }
    

    改变上面的内容会使原来一行接一行显示的所有单词变成一行。

    Fiddle