html - 中心动态宽度元素

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

首先，我认为您需要将输入类型更改为“复选框”。并将部分标签更改为 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吗？你希望它对那张照片有多准确？