центр динамической ширины элементов

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 на основе ширины элементов списка.

Серое выделенное изделие - состояние зависания предмета.

Родительский контейнер имеет фиксированную ширину/высоту.

Answer 1

Вы должны указать ширину для ul в CSS, чтобы сделать это:

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

Answer 2

Во-первых, я думаю, вы должны изменить типы ввода «флажок». И измените тег раздела на div (например, div id = "container")

Затем установите ширину и маржу (0px auto) для ul или контейнера.

Для подсветки, установите (в 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? Насколько точна ваша фотография?