Question

＆＃13;

ENTRYPOINT

＆＃13;

.recommends-Form-radioGroupContainer {
  display: flex;
  flex-wrap: wrap;
}

＆＃13;

有关获取<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>文本的最佳方法的任何想法（最终将为每个按钮分别提供p文字或提示，当选择该按钮时会显示该文字或提示）以便在所有单选按钮下方流动？

此外，即使浏览器调整大小并且按钮堆叠（即不是这样），也希望p保留在所选按钮下面

）

Answer 1

这是你正在寻找的吗？您可以移除flex:1;属性，如果您不希望它们具有灵活性并删除我刚刚添加的align-items and justify-content用于对齐。

如何对齐？

我在父母（最外面的div）上使用了relative and absolute positioning   和子元素（p标签）并初始隐藏所有<p>标签以及何时   选中单选按钮，显示关联的sibling <p> with that specific class。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

可以在所有单选按钮下面显示文本？

1 个答案: