中心动态宽度元素

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

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

Answer 2

您必须在CSS中指定ul的宽度才能执行此操作：

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