Центр динамической ширины элементов - PullRequest
Новая
       35

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

0 голосов
/ 27 декабря 2011

Вот что я пытаюсь сделать:

enter image description here

И вот разметка для этого: 

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

Элемент, выделенный серым цветом, является состоянием наведения элемента.

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

Ответы [ 2 ]

1 голос
/ 27 декабря 2011

Во-первых, я думаю, вам нужно изменить ваши типы ввода на «флажок». И измените тег раздела на 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>

тест здесь путем копирования и вставки

И хотите ли вы, чтобы код устанавливал флажки на этих изображениях? И это шрифт Arial? Насколько точно вы хотите, чтобы это фото?

0 голосов
/ 27 декабря 2011

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

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