[英]How to align radio button to the left of my text?
因此,對於我的突擊按鈕,我希望它們像上面的其他元素一樣在文本的右側對齊,但是我不知道該怎么做。 這是我為按鈕准備的小提琴和代碼。
<label>What kind of Ice Cream you like?</label>
<label><input type="radio" name="icecream" value="choco" id="radio"> Chocolate</label><br>
<label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label><br>
<label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label><br>
https://jsfiddle.net/russiandobby/gfj1nper/4/
我嘗試了很多方法,但是單選按鈕要么出現在文本下方,要么像這樣弄亂了順序。
嘗試為每個電台使用一個ID,如下所示:
<div>
<label for="chocolate">Chocolate</label>
<input type="radio" name="icecream" value="choco" id="chocolate">
</div>
*編輯
您需要更多地弄亂樣式,以使所有內容完全按您的需要對齊,但是要將單選輸入置於文本的右側,只需將<input>
元素放在<label>
元素之后。
目前,您的<label>
正在包裝輸入。 將其完全放在<input>
元素之前。
另外:為了可用性和可訪問性,單擊標簽應觸發您的無線電輸入。 要啟用此功能for=""
在每個標簽上設置一個for=""
屬性,該屬性與每個輸入的唯一id=""
屬性匹配。
<label for="choco">Chocolate</label><input type="radio" name="icecream" value="choco" id="choco">
<label for="vanil">Vanilla</label><input type="radio" name="icecream" value="vanil" id="vanil">
<label for="rocky">Rocky Road</label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="rocky">
試試這些解決方案
body{ background-color:#42f4e2; } #title{ text-align:center; font-family: 'Lobster', cursive; font-size: 50px; } #mainform{ background-color:#e8ecf2; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; border-radius: 10px; } label{ display: inline-block; width: 140px; text-align: right; margin-right: 40px; margin-top: 20px; } #survey-form{ display: block; margin-left: auto; margin-right: auto; width: 95%; text-align:center; } select{ display: inline-block; height:30px; text-align: right; margin-right: 40px; margin-top: 20px; } .redio-wrap label{ display: inline-block; margin-right: 10px; width: auto; } .redio-wrap label:first-child{ width: 140px; margin-right: 40px; }
<h1 id="title">Survey Form</h1> <div id="mainform"> <form action="/action_page.php" method="get" id="survey-form"> <label>*First name:</label> <input type="text" name="fname" placeholder="Enter your name"><br> <label>*Email:</label> <input type="text" name="email" placeholder="Enter your Email"><br> <label>*Age:</label> <input type="text" name="age" placeholder="Enter your Age"><br> <!--For the Drop Down menu--> <label>Describe your mood:</label> <select> <option value="" disabled selected>Select your option</option> <option value="happy">Happy</option> <option value="sad">Sad</option> <option value="angry">Angry</option> <option value="neutral">Neutral</option> </select><br> <!--For the Drop Down menu end--> <!--Radio buttons start--> <div class="redio-wrap"> <label>What kind of Ice Cream you like?</label> <label><input type="radio" name="icecream" value="choco" id="radio"> Chocolate</label> <label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label> <label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label> </div> </form> </div>
<input type="radio" name="icecream" value="choco" id="chocolate">
<label for="chocolate">Chocolate</label>
<input type="radio" name="icecream" value="choco" id="vanila">
<label for="vanila">Vanila</label>
名稱屬性應具有相同的值,而不是ID的具有相同的值
我遇到了同樣的問題,經審查后發現以下解決問題的方法,將其應用於您的冰淇淋變量:
首先,在HTML窗口中,應用以下內容:
<div class="rowTab">
<div class="labels">
<label for="ice cream Type"> What kind of Ice Cream you like?</label>
<div/>
<div class="rightTab">
<ul style="list-style: none;">
<li class="radio">
<label>Chocolate<input name="radio-buttons"
value="1" type="radio" class="ice cream Type"></label></li>
<li class="radio">
<label>Vanilla<input name="radio-buttons"
value="2" type="radio" class="ice cream Type"></label></li>
<li class="radio">
<label>Rocky Road<input name="radio-buttons"
value="3" type="radio" class="ice cream Type"></label></li>
然后,在CSS窗口中應用以下內容:
.ice cream type,
input[type="checkbox"] {
float: right;
margin-right:??px;
}
在這種情況下,您可以從HTML窗口中為每種口味定義“冰淇淋類型”類,然后在CSS窗口中使用“ float:right;”來為其設置樣式。 應當將單選按鈕放在每種口味名稱的右側。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.