我的网站有两个部分应该以类似的方式显示。一个显示正确,而另一个不正确。顶部将每个元素放在自己的行上,而底部将
放在上面,两个图像并排放在我想要的位置。 我的两个问题是: 1:为什么破解版会破解? 2:工作版本的哪一部分使其能够正确显示(或者更好的后续问题,css 的哪些部分不能帮助它正确显示并且可以删除?
损坏:
html:
<div id="maintitle">
<span id="chara1"><img src= "<?= $charused ?>" width="150" alt="char2"/></span>
<span id="maintitletext"><h1> Welcome to Born4battle's Wolfenstein 3D page</h1></span>
<span id="chara2"><img src= "<?= $charused ?>" width="150" alt="char2"/></span>
</div>
CSS:
#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;
}
工作:
html:
<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>
CSS:
#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;
}
最佳答案
请参阅Fiddle .
阅读您的问题后,我了解到您希望您的图片应该并排放置,而文本应该位于中间。在你损坏的代码中。
请让我知道我是否落后于某些地方。所以我可以根据您的需要进行更改。
查看我添加的 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 }
关于html - 为什么我的元素不能水平显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13715912/