上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

最近は横並びメニューなどは、CSSでリスト(ul,li)をfloatさせるのが多いです。

よく見る同じ横幅のタイプ↓はいろいろ載っていて比較的簡単に出来ましたが、

(クリックで原寸表示)

ページ下部によくあるテキストリンク↓のセンタリングでハマってしまいました。

ul自体のセンタリングがどうやっても出来ない＞＜
ググってもulとliの幅を固定するなど柔軟性に書けてたりしてダメ。

と思ったら見つけた。

ScuderiaWeb：リストのセンタリング
http://scuderia-web.com/tips/xhtml_css/list.php

[▽続き]ポイントはfloatではなくdisplay:inlineで横並びにさせる事らしい。
(あとリンク(a)のdisplayをblockにすることらしいけど無くても大丈夫だった。)


ブラウザごとの対策もいろいろしてるみたいです。
でもFirefoxのエラーコンソールで警告でるのが嫌なので試しにいろいろ削ってみた。
(問題なかったけどIEでエラー出てたり、CSSの文法的に間違ってるかも。)

HTML

<div id="textmenu">
	<ul>
		<li><a href="">about</a></li>
		<li><a href="">news</a></li>
		<li><a href="">portfolio</a></li>
		<li><a href="">blog</a></li>
		<li class="textmenu_li_right"><a href="">link</a></li>
	</ul>
</div>

CSS

#textmenu {
	text-align: center;
}
#textmenu li {
	list-style-type: none;
	border-right: 1px black solid;
	display: inline;
	padding: 0px 0.5em 0px;
}
/* IE用 */
* html #textmenu li{  
	display: inline;
	padding-left: 1em;
}
/* 右端リンクの右側の区切り棒を消す */
#textmenu .textmenu_li_right {
	border-right: none; 
}

※注意
周りとの間隔は#textmenuでmarginを指定。
上でfloatを使用している場合は解除(clear:both)しておく(#textmenuで指定可)。

表示はこんな感じ。
Firefox（2.0.0.20）　　(クリックで原寸表示)



IE6（6.0.2900）　(クリックで原寸表示)




IEだと区切り棒が長いのが萎え。

インライン要素のliだと改行あると微妙な空白ができるのでpaddingで調整。

Comment:2 | TrackBack:0

Name:
Mail:
URL:
Comment:
Pass:

Secret

　（承認後掲載になります）

TrackBackURL
→http://denshiki.blog33.fc2.com/tb.php/51-1883b9a4