spanのタグの中を1列で表示

質問

下記のspanのタグの中を1列で表示するにはCSSをどのようにしたらいいのでしょうか。

<span>
ああああ
<downcount id="countdown0" class="hasCountdown">
<div class="countdown_row countdown_amount">7339日 00:55:13</div>
</downcount>
いいい
</span>

回答No.3

noname#187595 · ベストアンサー

先のご回答にもありますが、spanはインライン要素、divはブロックレベル要素です。
インライン要素の中にブロックレベル要素を入れてはいけない、というのが基本的な原則です。

下手なたとえかもしれませんが、インライン要素を液体（流し込めるもの）、ブロックレベル要素を固体（箱のようなもの）とお考えください。
インライン要素にはサイズや余白を指定しても効きませんし、ブロックレベル要素を包み込もうとしても、うまく行きません。
逆にブロックレベル要素にインライン要素を入れるのは問題ありません。

不勉強にして<downcount>というタグは見たことがないのですが、
<div>
ああああ
<downcount id="countdown0" class="hasCountdown">
<span class="countdown_row countdown_amount">7339日 00:55:13</span>
</downcount>
いいい
</div>
という記述ではいけないのでしょうか。

回答No.2

ORUKA1951

HTMLを書いたら、
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でチェック。まあ、100点でないにしても、大きな減点ないように

<span>は行内要素(inline)ですから、内部にブロック要素はもてません。
<!ELEMENT SPAN - - (%inline;)*( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
　%inlineとは行内要素のみゼロ個以上

また、必ずブロック要素の内部になければなりませんから

　この様な場合、ブラウザは
<仮想ブロック>
　<span>あああ</span>
</仮想ブロック>
<div ・・></div>
<仮想ブロック>
　<span>いいい</span>
</仮想ブロック>

と解釈して描画します。この解釈はブラウザごとに異なりますから、当然ブラウザ間で表示も変わります。

　⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )

　は最初に覚えるべきもっとも大品部分です。またdowncountという要素はありません。

回答No.1

Tacosan

そもそも構造がおかしいのが大問題.