696G [ BLOG ]

CSSで横並びにしたリストをセンタリング

CSSメモ。こちらを参考にさせて頂きました。
display: inline;かー。知らなかったな。

以下引用

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; 
}

This entry was posted on 火曜日, 11月 22nd, 2011 at 6:01 PM. It is filed under memo, txt and tagged with css, list, センタリング. You can follow any responses to this entry through the RSS 2.0 feed.