インラインしてね～。
しかし1打目よりは驚かないよ＾＾。

ハック
Webサイト作成の際にWebブラウザ間で異なるCSSの実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである　wikiより

ハック・・・ドットハックというゲーム思い出します。
まずハック

正直、↑の記述はよく理解してません。
「おまじない」と思っております。
勉強して説明できるレベルまで日々精進。

追加を想定した作りになってるのですが、変更・追加がしづらいガチガチに固めた出来上がりに。

神から渡された武器はdisplay:inline-block。
display::blockよく使うのでなんとなく理解はしてるつもりですが・・。
ｂlockがブロック要素にすると解釈してます。
ならinlineはインライン要素にする　になるはず。

某サイトの説明を

「インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。」
インラインでありブロックでもある。便利な奴だね。

記述するとフロートではないのに横に。
神「横書きノートの一行をイメージすれば良い。端までいくと改行。
１）「ワレワレハ宇宙人ダ」
２）「ワレワレハ宇
宙人ダ」
のように。でも２）のようになると困るから１）のように形を保ちつつ改行してほしいからインラインでありブロックでもあるinline-blockなわけだ。
文字が端までいって

↑のように半分切れて改行しないのは文字自体にも幅・高さがありからで、
入りきれない場合は

↑のように改行される。
文字一つ一つを箱だとしたら２）のようになる。
だけど「←から→」まで箱（ブロック）の範囲だとすれば入りきらなければ１）丸ごと改行されると」

インラインでもあるから

で中央揃えができる。
追加・変更があっても容易にでき形も保たれる。

例えば↑の画像で言うならmenu>ｄｄと指定すればｄｄだけにＣＳＳの効果が反映される。
menuの直接の子要素に対して＞を使うと指定の子要素に反映される。
メリットは無駄にクラスを作らない、振らなくすむ。記述が減る。

定義リスト　dl dt dd　は調べるとかなり使い勝手が良いそうで。
特にｄｄはブロック要素・インライン要素なんでもぶっこめるそうです。
dtに関してもul li　だと頭のliだけ効果をもたらしたい場合（かなり狭い条件ですが）
liだとクラスなどを振るしかなくなる。dtなら#menu dtで出来ると。
ただ、これも乱用するなと言われてます。定義リストであること理解しつつ意味のあるところに使うようにと。

上のすべてにフロートレフトが適用される。
ただ乱用すると身動きがとれなくなったりするらしい。
オイラの失敗は

フロート＝浮いてるのでマージンを取ると左端から取るところを普通なマージンの取り方。

やっぱ神の教わった技術もhttp://ameblo.jp/do-sirouto/entry-11801175570.html適用されてませんね＾＾；。
日付・ＭＥＮ（ＬＡＤＹ）・テキスト順に回り込ませてる感じです。
すべて（日付・ＭＥＮ（ＬＡＤＹ）・テキスト）にフロートの効果をつけたことによって回り込むブロックがなくなりフロート自体が成立しなくなり結果なにも浮かなくなった。
適切な記述、今回の場合テキストのフロートを取り除けば

う、浮いてますね。

終わった。総時間７０－８０時間くらいなのか＞＜

神「んじゃ＠１周やろうか」
オイラ「・・・（現実逃避）」
神「あと１周やるこによって色々気づくことあるし、途中からちょこちょこ隣接・複合セレクタ取り入れてたでしょ？」
オイラ「取り入れてました」
神「始めから取り入れる前提でやれば記述かなり減るし、時間も大幅に短縮できるから」
オイラ「オイラがんばります！（ヤケクソ）」

次回に続く。

鬼「↑があるだろ」
オイラ「はい・・。。」

鬼「ドーーン」
オイラ「あべし！」
鬼「がんばって」
オイラ「・・・」

　　－－－思考中ーーー

幅・高さはｐｘで記述すると↑のテキストが増えるたび書き直すのは現実的ではないとして
幅などをautoに・・・、出来ませんか・・。

鬼「金棒をあげるよ」
オイラ「ネガティブマージン・・ですか」
調べてみると悪魔の仕事などなど賛否両論な手法なのね。
相殺ですか・・。やり方は分かったが、なんでそうなるか意味が分からん。
オイラ「これってバグなんですか？」
鬼「バグではないよ。うまくは説明できないけど、そういった現象が起きるのよ。」
オイラ「はぁ・・。そうですか。」
鬼「他にも解消方法はあるけど、君が出来る範囲だとネガティブマージンとあと一つある。
とりあえずネガティブマージンでやってみな。経験だと思って」
オイラ「かしこまりましたボス」

画面に表示できる最大値3万４０００くらいらしく3万あれば問題ないっしょということで
内の余白パディング3万、外の余白マージン-3万で相殺。デメリットとして3万ほどｐｘを取ってるのでそれ相応に重くなるらしい。

揃ったけど・・・なんで？
できれば他の方法で揃えたいと思うのでした。

なかなか笑える現象ですね。
調べるとけっこうベタなバグらしく「階段バグ」。
フロートが正常に働かないとか。
有名なバグなので解消する方法はあっさり見つかり直そうと思ったら
自己のバグを発見＾＾；

神「a　をフロートしちゃダメでしょ」

神「li　というブロックをフロートさせなきゃね」
オイラ「申し訳ないです」

list-style:none導入。

出来た。
しかしバグ解消方法を調べてたらなかなか難儀ですねＩＥさんは＾＾；

（けっこうあるのね・・）
神「みんながクロームだけで見てるわけではないから他のブラウザでもちゃんと表示されてるか確認しないとね。今回はクローム・Firefox・IE(インターネット・エクスプローラー)だけでいいよ」
オイラ「わ、分かりました」
神「ＩＥはバージョン７～１１まで見てね。６以降はいいや。ＸＰはサポート終了するし」

Firefoxは問題なし。
ＩＥは

１０－１１は問題なし・・

透明になっとらん！
バージョンによってopacity・・が適用されないのね。（コレ以外にも色々・・。）

先輩に擦り寄ってみるを実行。

（！－－　－－）の中の文字は表示されないらしい。ｈｔｍｌ上の説明文とかに使うとかなんとか。

hoverはなんとかクリア。

背景画像（ｃｓｓ）が切り替わるように記述してｈｔｍｌにopacityにしてるのですが、
コレは文字分しか出てないのか・・・。前回となにが違うのだ・・・？

無駄に迷走しました。

無駄を記述しないに囚われすぎて書くべき所を書かないという失態でした＞＜