我读过有人问同样的问题，但布局/目的不同......
我似乎无法弄清楚给出的答案，因为我的代码看起来实际上非常不同，因为我在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"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 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"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
我可能在我的代码中做了其他的东西，不是那么高效的打火机，但我知道不是另一种方式这样做，我在编程方面很新..
这是一个小游戏，需要将这些词放入图像下的表格中。
如果有人对我有任何提示，那么我们总是欢迎那些：D 提前谢谢！
答案 0 :(得分：2)
请注意，CSS类名称区分大小写，.word {...}不适用于<div class="Word">...</div>
无论如何，你的单词被包含在3个block级元素中，你必须使它们全部内联以获得你想要的效果
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>
P.S你有一些语法错误
答案 1 :(得分：2)
如果我理解您正确提出的问题，那么您的问题就是您的问题。＃34; .word＆＃34; class是小写的，而在HTML中被引用为＆＃34; Word＆＃34;。因此，请尝试将.word类更改为
.Word { display: inline-block; }
更改上面的内容会使所有现在一行一行显示的单词。