Html 为什么赢了'；我的元素不能水平显示吗？

我的网站有两个部分，应该在一个类似的庄园里展示。一个显示正确，而另一个显示不正确。上面的一个将每个元素放在自己的行上，而下面的一个将放在上面，两个图像按我所希望的方式并排放置。 我的两个问题是： 1：为什么坏版坏了？ 2：工作版本的哪个部分使其能够正确显示（或者更好的后续问题是，css的哪些部分不能帮助其正确显示，并且可以删除

破碎的： html:

工作： html:

---

要在同一行中显示文本和图像，请在代码中进行以下更改：

请看地图

在阅读了你的问题之后，我明白了你想要的是你的图片应该并排，而文本应该在中间。在你破碎的代码中

请让我知道，如果我落后一些地方。这样我可以根据您的需要进行更改

请参见我添加的css规则：

#maintitle{ color: #ffff00; text-align: center; overflow:hidden; width:480px; border:1px solid red; }

#maintitle span {   width:148px;    display:block;  font-size:12px; }

#chara1, #chara2, #maintitletext{ margin-top: 0px; margin-right: auto; margin-left: auto; display: inline; padding: .5em; width: 110px; float:left; // added to make all elements in horizontal manner }

---

我想当我说我希望它们显示相同内容时，我错了。在断开的一行中，我希望图像和文本都显示在一行中。同样在您的工作部分，“列表样式类型：无什么都不做，所以你最好把它移走。这也会把所有的东西都砸在一起。你能直观地给我看看你的问题，或者屏幕截图，或者任何草图吗

#maintitle{
color: #ffff00;
text-align: center;
}

#maintitle ul{
margin:0;
padding: 0;
list-style-type: none;
}

#maintitle li{
display: inline;
}

#chara1, #chara2, #maintitletext{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
padding: .5em;
width: 110px;
}

<div id="share">
<p> Get the official shareware for Wolfenstein 3D and Spear of Destiny below </p>
<span id="getwolf"><a href="ftp://download.dosgamesarchive.com/wolf3d.zip"><img src="http://www.timsooley.com/wolfnow.gif" alt="getwolf"></a></span>
<span id="getspear"><a href="ftp://download.dosgamesarchive.com/destiny.zip"><img src="http://www.timsooley.com/getspear.gif" alt="getspear"></a></span>
</div>

#share ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#share li{
display:inline;
}

#getspear, #getwolf{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
/*background: #bbbbbb;
border-top: solid 2px #333333;
border-left: solid 2px #333333;
border-right: solid 3px #999999;
border-bottom: solid 3px #999999;*/
padding: .5em;
width: 110px;
}

#maintitle{
color: #ffff00;
text-align: center;
}

#maintitle ul{
margin:0;
padding: 0;
}

#chara1, #chara2, #maintitletext{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
float: left;
padding: .5em;
width: 150px;
}​

#maintitle{ color: #ffff00; text-align: center; overflow:hidden; width:480px; border:1px solid red; }

#maintitle span {   width:148px;    display:block;  font-size:12px; }

#chara1, #chara2, #maintitletext{ margin-top: 0px; margin-right: auto; margin-left: auto; display: inline; padding: .5em; width: 110px; float:left; // added to make all elements in horizontal manner }