色々解決策のページは有るけど、display:blockが必要な背景を使った場合の方法は見つからなかったので、手探りでやってみた。結局解ったのは以下のこと。
1.基本概念。inline要素で横並びを実現して、float-leftは使わない。
2.注意点。各要素にぶれが内容にセレクタをきっちり指定してブロック要素のプロパティーを貼り分ける。
3.ulの要素に text-align: center;
4.liの要素に display: inline;
5.li a の要素に display:inline-block;
6.背景をつけるダイレクトな要素に
（例：#prev a {display: block;}）
以上でうまく行ったのだけどどうだろうか？
(IE6~IE8,FF,CHROME,Safariで確認。どのブラウザでどの要素が有効になっているのかは未確認)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>リスト</title>
<style>
li {
list-style:none;
}
/*--------------------------------*/
/* ページ切り替え */
/*--------------------------------*/
#page {
}
#pmenu ul{
text-align: center;
}
#pmenu li{
display: inline;
}
#pmenu li a{
display:inline-block;
}
#page_btn a{
font-size: 14px;
line-height: 28px;
height: 28px;
width: 40px;
color: #ffffff;
background-image: url(./images/page_btn.gif);
background-repeat: no-repeat;
background-position: left top;
display: block;
}
#page_btn a:hover{
background-image: url(./images/page_btn.gif);
background-position: left bottom;
}
#prev a{
font-size: 14px;
line-height: 28px;
height: 28px;
width: 73px;
color: #ffffff;
background-image: url(./images/cntrl_btn.gif);
background-repeat: no-repeat;
background-position: left top;
display: block;
}
#prev a:hover{
background-image: url(./images/cntrl_btn.gif);
background-position: left bottom;
}
#next a{
font-size: 14px;
line-height: 28px;
height: 28px;
width: 73px;
color: #ffffff;
background-image: url(./images/cntrl_btn.gif);
background-repeat: no-repeat;
background-position: left top;
display: block;
}
#next a:hover{
background-image: url(./images/cntrl_btn.gif);
background-position: left bottom;
}
</style>
</head>
<body>
<div style="width:100%;text-align:center">
<ul id="pmenu">
<li id = "prev"><a href="#">＜前へ</a></li>
<li id = "page_btn"><a href="#">1</a></li>
<li id = "page_btn"><a href="#">2</a></li>
<li id = "page_btn"><a href="#">3</a></li>
<li id = "page_btn"><a href="#">4</a></li>
<li id = "page_btn"><a href="#">10</a></li>
<li id = "next"><a href="#">次へ＞</a></li>
</ul>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿