[英]Possible to have text flow underneath all radio buttons?
.recommends-Form-radioGroupContainer { display: flex; flex-wrap: wrap; }
<fieldset class="gds-FormField"> <legend class="gds-FormField-label">Your Health</legend> <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden"> <div class="gds-FormField-control recommends-Form-radioGroupContainer"> <div> <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label> </div> </div> </fieldset>
Any thoughts on best approach to get p
text (will eventually have a separate p
text or tip for each button, which will be shown when that button is selected) to flow underneath all radio buttons? 是否有关于获取
p
文本的最佳方法的想法(每个按钮最终都会有一个单独的p
文本或提示,当选择该按钮时将显示该提示)流到所有单选按钮的下方?
Also, wanting to have the p
remain under the selected button even when the browser is resized and the buttons are stacked (ie not like this) 另外,即使在调整浏览器大小和堆叠按钮的情况下,也希望将
p
保留在所选按钮下(即不是这样)
Is this what you're looking for? 这是您要找的东西吗? You could remove, the
flex:1;
您可以删除
flex:1;
property if you don't want them to be flexible and remove the align-items and justify-content
which I just added for alignment. 属性,如果您不希望它们变得灵活,请删除我刚刚添加的用于对齐的
align-items and justify-content
。
How is it being aligned?
如何对齐?
I've made use of
relative and absolute positioning
on parent (the outermost div) and child element (p tag) and initally hidden all the<p>
tags and when the radio button is checked, the associatedsibling <p> with that specific class
is shown.我已经在父级(最外面的div)和子级元素(p标签)上进行了
relative and absolute positioning
,并最初隐藏了所有<p>
标签,当选中了单选按钮时,与之相关的sibling <p> with that specific class
。
.recommends-Form-radioGroupContainer{ display:flex; position:relative; } .recommends-Form-radioGroupContainer *{ flex:1; } .recommends-Form-radioGroupContainer .gds-FormField-help{ display:none; padding:5px; border:3px solid lightblue; color:blue; background:rgba(60,60,256,0.1); position:absolute; } input[type="radio"]:checked ~ .gds-FormField-help{ display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset class="gds-FormField"> <legend class="gds-FormField-label">Your Health</legend> <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden"> <div class="gds-FormField-control recommends-Form-radioGroupContainer"> <div> <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Another long message that you will type to check if it works</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">And this is also one of them other long messages</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Last long message I promise</p> </div> </div> </fieldset>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.