可変レイアウト時の、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 · ベストアンサー

sectionの用途が少し違うような・・
→4.4.2 The section element ( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element )
　--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は昔にあまりに使わないほうがいいと覚えたため考えていませんでしたが、
書いて頂いたコードを参考に色々試した所、なんとか思う通りに表示させることができました。

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