センターダイナミック幅要素

Question

は、ここで私がやろうとしているものです：

そして、ここではそのためのマークアップです：

<section> 
    <h2>Vulputate Tellus Cras Cursus Risus</h2> 
    <ul> 
    <li><input type="radio" name="example" id="option_1"> <label for="option_1">Etiam porta sevm</label></li> 
    <li><input type="radio" name="example" id="option_2"> <label for="option_2">Curabitur blandit tempus porttitor</label></li> 
    <li><input type="radio" name="example" id="option_3"> <label for="option_3">Fusce dapibus, tellus ac</label></li> 
    <li><input type="radio" name="example" id="option_4"> <label for="option_4">Donec id elit non mi porta</label></li> 
    </ul> 
</section> 

私は中央に幅に基づいてulを水平にしたいですリスト項目の

灰色の強調表示された項目は、項目のホバー状態です。

親コンテナの幅と高さは固定されています。あなたはそれを行うにはCSSであなたのulための幅を指定する必要があります

Answer 1

：

ul{ 
    width: 250px; 
    margin: auto; 
} 

Answer 2

まず、私はあなたがにあなたの入力タイプを変更する必要があると思う「チェックボックスをオンにします。」セクションタグをdivに変更する（div id = "container"など）

次に、ulまたはコンテナの幅と余白（0px auto）を設定します。 （CSSの）li:hover {background-color:#ddd;}

を設定ハイライトの

、私はあなたが何を意味するかわからないんだけど、「親コンテナを固定幅/高さを持っています。」しかし、それ以上指定すると私は助けてうれしいです。

最終結果：

<style>ul{padding:0;} li{list-style-type:none; display:block;} #section{width:364px; margin:auto;} ul{} li:hover{background-color:#ddd;} input{}</style> 

<div id="section"> 
    <h2>Vulputate Tellus Cras Cursus Risus</h2> 
    <ul> 
    <li><input type="checkbox" name="example" id="option_1"> <label for="option_1">Etiam porta sevm</label></li> 
    <li><input type="checkbox" name="example" id="option_2"> <label for="option_2">Curabitur blandit tempus porttitor</label></li> 
    <li><input type="checkbox" name="example" id="option_3"> <label for="option_3">Fusce dapibus, tellus ac</label></li> 
    <li><input type="checkbox" name="example" id="option_4"> <label for="option_4">Donec id elit non mi porta</label></li> 
    </ul> 
</div> 

コピーによる試験hereと

を貼り付けるそして、あなたは、チェックボックスこれらの画像を作るために、コードをご希望ですか？フォントArialはありますか？あなたはその写真にどれくらい正確にしたいですか？