0

私のウェブサイトには 2 つのセクションがあり、同様のマナーで表示されるはずです。1 つは正しく表示されますが、もう 1 つは正しく表示されません。一番上のものは各要素をそれぞれの行に配置し、一番下のものは

上と2つの画像を並べて表示します。私の 2 つの質問は次のとおりです。 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;
}
4

2 に答える 2

1

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 }
于 2012-12-05T04:28:28.403 に答える
0

テキストと画像を同じ行に表示するには、コードに次の変更を加えます。http: //jsfiddle.net/S3CBj/2/

#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;
}​
于 2012-12-05T03:53:40.133 に答える