如何讓單選按鈕位於標籤旁邊的中間文本內？

* { 
 
    font-family:sans-serif; 
 
} 
 
#quote_form table { 
 
    border-collapse: collapse; 
 
} 
 
#quote_form td, #quote_form th { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#quote_form fieldset>label { 
 
    display: block; 
 
    font-weight: bold; 
 
    margin-top: 7px; 
 
} 
 

 
#quote_form input { 
 
    height: 16px; 
 
    padding: 2px; 
 
} 
 
#quote_form select { 
 
    height: 22px; 
 
    padding: 2px; 
 
} 
 

 
#quote_form td>label { 
 
    font-size: .9em; 
 
} 
 
#quote_form td { 
 
    padding-right: 3px; 
 
} 
 
#quote_form td>input { 
 
    width: 200px; 
 
} 
 
#quote_form .required { 
 
    color: red; 
 
} 
 
#quote_form input { 
 
    font-family: sans-serif; 
 
} 
 
#quote_form fieldset>input { 
 
    width: 500px; 
 
} 
 
#quote_form fieldset>select { 
 
    width: 504px; 
 
} 
 
#quote_form fieldset { 
 
    border: 1px solid silver; 
 
    padding: 10px; 
 
} 
 
#quote_form legend { 
 
    margin-left: 15px; 
 
    padding: 2px; 
 
    font-weight: bold; 
 
} 
 
#quote_form .calendar { 
 
    width: 80px; 
 
} 
 
#quote_form .datetime td { 
 
    padding: 0; 
 
} 
 
#quote_form .datetime .date { 
 
    padding-right: 4px; 
 
} 
 
#quote_form .datetime .hour { 
 
    font-weight:bold; 
 
} 
 
#quote_form .datetime .minute { 
 
    padding-right: 4px; 
 
} 
 
#quote_form .datetime .ampm input { 
 
    margin: 0 2px 0 0; 
 
} 
 
#quote_form .datetime .ampm label { 
 
    text-align: baseline; 
 
    margin-right: 2px; 
 
    background-color: #eeeeee; 
 
    border-radius: 4px; 
 
}

<form id="quote_form"> 
 
    <table class="datetime"> 
 
     <tbody> 
 
      <tr> 
 
       <td class="date"><input type="text" class="calendar"></td> 
 
       <td class="hour"><select></select>:</td> 
 
       <td class="minute"><select></select></td> 
 
       <td class="ampm"> 
 
        <label><input type="radio" name="pickup_ampm">AM</label> 
 
        <label><input type="radio" name="pickup_ampm">PM</label> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><label>Date</label></td> 
 
       <td><label>HH</label></td> 
 
       <td><label>MM</label></td> 
 
       <td></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</form>

的單選按鈕戳灰色標籤。我希望他們坐下一點，以便它們位於標籤文本旁邊。我嘗試了負利潤 - 沒有工作。

來源

2012-12-01 mpen

不應該'input'被外界'label'？你真的必須把它們放進去嗎？ –

@SidharthMudgal：我不需要，但我喜歡。 – mpen

這應該做你想做的，如果我理解正確。

.ampm label{ 
    display:block; 
    float: left; 
    padding:2px 4px; 
}

來源

2012-12-01 22:56:48 user1869494

我還應該提到標籤元素不應環繞輸入。你應該使用更像

的東西。並將上述樣式應用於div而不是標籤。 – user1869494

爲什麼？我特別喜歡包裝輸入元素以及它使整個區域可點擊，包括任何空格，並且不需要「for」/「id」對，並且在任何瀏覽器中都不會造成任何問題。測試。 – mpen

這個CSS使得標籤背景覆蓋整個收音機，但仍然存在垂直居中的問題。儘管我可能可以通過行高來做到這一點，因爲它是一個塊。 – mpen

我使用Windows8在這裏工作很好。

任何方式嘗試這種方法。

label > input[type="radio"] 
{ 
    position: relative; // Don't forgot this line 
    top: -5px; // Change this value to set exact place. 
}

花葯自動方式是

label > input[type="radio"] 
{ 
    position: relative; 
    vertical-align: middle; 
}

來源

2012-12-01 23:08:20

如何讓單選按鈕位於標籤旁邊的中間文本內？

回答

相關問題