[英]How to align radio button to the left of my text?
So for my raid buttons, I want them to align to the right of my text, like other elements above, but I cant figure out how. 因此,对于我的突击按钮,我希望它们像上面的其他元素一样在文本的右侧对齐,但是我不知道该怎么做。 Here is the fiddle and code I have for my buttons.
这是我为按钮准备的小提琴和代码。
<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/ https://jsfiddle.net/russiandobby/gfj1nper/4/
I tried many ways but my radio buttons either end up under the text or messed up order like that. 我尝试了很多方法,但是单选按钮要么出现在文本下方,要么像这样弄乱了顺序。
Try using an id for each radio, like this: 尝试为每个电台使用一个ID,如下所示:
<div>
<label for="chocolate">Chocolate</label>
<input type="radio" name="icecream" value="choco" id="chocolate">
</div>
*edited *编辑
You'll need to mess with the styling more to align everything exactly how you want it, but to get the radio inputs to the right of the text simply put the <input>
element after the <label>
element. 您需要更多地弄乱样式,以使所有内容完全按您的需要对齐,但是要将单选输入置于文本的右侧,只需将
<input>
元素放在<label>
元素之后。
At the moment your <label>
is wrapping the input. 目前,您的
<label>
正在包装输入。 Place it wholly before the <input>
element. 将其完全放在
<input>
元素之前。
Additionally: for usability and accessibility, clicking the label should trigger your radio input. 另外:为了可用性和可访问性,单击标签应触发您的无线电输入。 To enable this set a
for=""
attribute on each label that matches a unique id=""
attribute for each 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">
Try These Solutions 试试这些解决方案
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>
the name attribute should have same value rather than the id's having same value 名称属性应具有相同的值,而不是ID的具有相同的值
I had the same problem, and upon reviewing I found the following to solve the problem, which I applied to your ice cream variables: 我遇到了同样的问题,经审查后发现以下解决问题的方法,将其应用于您的冰淇淋变量:
First, in the HTML window, apply the following: 首先,在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>
THEN, in the CSS window apply the following: 然后,在CSS窗口中应用以下内容:
.ice cream type,
input[type="checkbox"] {
float: right;
margin-right:??px;
}
In this case, from the HTML window you are defining the class 'ice cream type' for each flavor, then in the CSS window you are styling it with 'float: right;' 在这种情况下,您可以从HTML窗口中为每种口味定义“冰淇淋类型”类,然后在CSS窗口中使用“ float:right;”来为其设置样式。 which should put the radio buttons to the RIGHT of each flavor's name..
应当将单选按钮放在每种口味名称的右侧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.