中心動態寬度元素

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

你必須在CSS中指定寬度爲您ul這樣做：

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

Answer 2

首先，我認爲你需要改變你的輸入類型爲「複選框。」然後將section標籤更改爲div（例如div id =「container」）

然後爲ul或容器設置寬度和邊距（0px自動）。

爲亮點，集（在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是什麼？你想要那張照片有多準確？