可変レイアウト時の、floatしたulの中央寄せ

floatしたulをセンタリングする為、以下のソースを記述しました。

<section>
<ul>
<li>ボタン1</li>
<li>ボタン2</li>
</ul>
</section>

section {
position: relative;
overflow: hidden;
}

section ul{
float:left;
left:50%;
position:relative;
}

section ul li{
float:left;
left:-50%;
position:relative;
width:150px;
margin-right: 5px;
}

ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い

section ul li{
float:left;
left:-50%;
position:relative;
width:40%;
margin-right: 5px;
}

に書き換えた所、リストの横幅がすごく狭くなってしまいました。

％幅で横に2つ並んだリストボタンをセンタリングさせられれば、
potisionを使用したセンタリングにこだわっているわけではありませんが
自分で思いつく限りを試しても解決に至らず、質問させていただきました。
html5、css3で記述しています。


詳しい方がいらっしゃいましたら、よろしくお願い致します。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/08/23 00:34

sectionの用途が少し違うような・・

→4.4.2 The section element ( http://www.w3.org/TR/2011/WD-html5-20110525/sect … )
　--The section element is not a generic container element. --
デザインのためだけに必要ならdivを使うべきです。基本的に{見出しヘッダー}をもつひとつの文節を示します。
　この場合は、ナビゲーションならnav、そうでなければdivではないかと・・

　また、CSS3とのことですが、そこまで行かなくてもCSS2.1でよいはずです。floatはCSS2以前でdisplayにinline-blockがないときにやむなく使われていた方法です。

　HTML5でもっとも重視されるのは文書構造のマークアップです。それにしたがってマークアップすると
<header>
　<h1 id="title">Your title</h1>
　<nav>
　　<ul>
　　　<li><a href="./some">Some</a></li>
　　　<li><a href="./nav">navigation</a></li>
　　　<li><a href="./link">links</a></li>
　　</ul>
　</nav>
</header>

nav{line-height:1.6em;width:100%;text-align:center;}
nav ul,nav ul li{list-style:none;margin:0;padding:0;}
nav ul{display:block;}
nav ul li{display:inline-block;width:20%;border:outset 2px gray;}
nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}


nav{line-height:1.6em;width:100%;text-align:center;}
nav ul,nav ul li{list-style:none;margin:0;padding:0;}
nav ul{display:block;}
nav ul li{display:inline-table;}

★なお、floatは、あくまで文中の挿絵などの周囲にテキストを回りこませるためのもので、ブロックの配置に使用するのは目的外使用です。

この回答へのお礼

お礼が遅くなり、大変申し訳ありません。

inline-blockは昔にあまりに使わないほうがいいと覚えたため考えていませんでしたが、
書いて頂いたコードを参考に色々試した所、なんとか思う通りに表示させることができました。

回答をありがとうございました。

お礼日時：2012/09/12 18:11