我有一个包含3列的div,这些是span
标签:
$('#id_size_0').attr('checked', true);
$(".quantity_50").html("S/.50");
$(".savings_50").html(" ");
$(".quantity_100").html("S/.70");
$(".savings_100").html("Ahorra 30%");
$(".quantity_200").html("S/.90");
$(".savings_200").html("Ahorra 55%");
$(".quantity_300").html("S/.108");
$(".savings_300").html("Ahorra 64%");
$(".quantity_500").html("S/.140");
$(".savings_500").html("Ahorra 78%");
$('input:radio[name="size"]').change(function() {
if ($(this).val() == '5cm x 5cm') {
$(".quantity_50").html("S/.50");
$(".savings_50").html(" ");
$(".quantity_100").html("S/.70");
$(".savings_100").html("Ahorra 30%");
$(".quantity_200").html("S/.90");
$(".savings_200").html("Ahorra 55%");
$(".quantity_300").html("S/.108");
$(".savings_300").html("Ahorra 64%");
$(".quantity_500").html("S/.140");
$(".savings_500").html("Ahorra 78%");
} else if ($(this).val() == '7cm x 7cm') {
$(".quantity_50").html("S/.70");
$(".savings_50").html(" ");
$(".quantity_100").html("S/.90");
$(".savings_100").html("Ahorra 36%");
$(".quantity_200").html("S/.130");
$(".savings_200").html("Ahorra 54%");
$(".quantity_300").html("S/.160");
$(".savings_300").html("Ahorra 69%");
$(".quantity_500").html("S/.240");
$(".savings_500").html("Ahorra 66%");
} else if ($(this).val() == '10cm x 10cm') {
$(".quantity_50").html("S/.90");
$(".savings_50").html(" ");
$(".quantity_100").html("S/.115");
$(".savings_100").html("Ahorra 36%");
$(".quantity_200").html("S/.180");
$(".savings_200").html("Ahorra 50%");
$(".quantity_300").html("S/.280");
$(".savings_300").html("Ahorra 48%");
$(".quantity_500").html("S/.450");
$(".savings_500").html("Ahorra 50%");
} else if ($(this).val() == '13cm x 13cm') {
$(".quantity_50").html("S/.200");
$(".savings_50").html(" ");
$(".quantity_100").html("S/.370");
$(".savings_100").html("Ahorra 10%");
$(".quantity_200").html("S/.430");
$(".savings_200").html("Ahorra 46%");
$(".quantity_300").html("S/.500");
$(".savings_300").html("Ahorra 58%");
$(".quantity_500").html("S/.900");
$(".savings_500").html("Ahorra 55%");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="semi-transparent padded rounded">
<div class="bg-white rounded padded padded-40">
<form method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="PjG1UJe5x6E2lb53BEbvWJ6tcKJcWfI15LWoB4bp57KMhoAGTDFyKuTtSkcILXpV">
<div class="">
<div id="size">
<legend class="text-size16 bold-font"> Selecciona un tamaño</legend>
<ul class="form-items">
<li>
<span><input type="radio" name="size" value="5cm x 5cm" id="id_size_0" required> 5 cm x 5 cm</span>
</li>
<li>
<span><input type="radio" name="size" value="7cm x 7cm" id="id_size_1" required> 7 cm x 7 cm</span>
</li>
<li>
<span><input type="radio" name="size" value="10cm x 10cm" id="id_size_2" required> 10 cm x 10 cm</span>
</li>
<li>
<span><input type="radio" name="size" value="13cm x 13cm" id="id_size_3" required> 13 cm x 13 cm</span>
</li>
</ul>
</div>
<div id="quantity">
<legend class="text-size16 bold-font"> Selecciona la cantidad</legend>
<ul class="form-items">
<li>
<span><input type="radio" name="quantity" value="50" id="id_quantity_0" required> 50</span>
<span class="quantity_50"></span>
<span class="savings_50"></span>
</li>
<li>
<span><input type="radio" name="quantity" value="100" id="id_quantity_1" required> 100</span>
<span class="quantity_100"></span>
<span class="savings_100"></span>
</li>
<li>
<span><input type="radio" name="quantity" value="200" id="id_quantity_2" required> 200</span>
<span class="quantity_200"></span>
<span class="savings_200"></span>
</li>
<li>
<span><input type="radio" name="quantity" value="300" id="id_quantity_3" required> 300</span>
<span class="quantity_300"></span>
<span class="savings_300"></span>
</li>
<li>
<span><input type="radio" name="quantity" value="500" id="id_quantity_4" required> 500</span>
<span class="quantity_500"></span>
<span class="savings_500"></span>
</li>
</ul>
</div>
</div>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar</button>
<br><br>
<p class="text-size10 text-center">Siguiente: subir imagen</p>
</form>
</div>
</div>
(codepen)
第一列是单选按钮及其标签,第二列是成本,第三列是节省。
除了使用此代码将单选按钮向左对齐之外,我还没有在CSS中使用其他功能,而是此页面:
form ul {
padding-left: 0;
}
form ul li {
display: flex;
justify-content: space-between;
width: 200px;
text-align: left;
}
我试图使用空格(
)来对齐项目,但这只是不可能正确完成。
答案 0 :(得分:1)
这是使用CSS网格的片段:
#quantity .form-items li {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
检查对https://caniuse.com/#feat=css-grid的支持 并在必要时使用polyfill来构建您正在构建的东西/用户需要的东西。
或者如果不可能使用网格,则可以使用display:table
实现类似的效果#quantity .form-items li {
display: table;
width: 100%;
}
#quantity .form-items li span {
display:table-cell;
width: 33.33%;
}