html - CSS:如何将单选按钮与图例对齐?
问题描述
我有一个表格,但我的图例没有与单选按钮对齐。我怎样才能做到这一点?
我需要将图例标签与单选按钮对齐。像这个例子:
是)我有的:
我已经对齐了单选按钮,但没有图例。我需要每个图例的第一个字母与单选按钮对齐。就像在图像示例中一样。
CSS:(对齐单选按钮):
ul, li {
list-style-type: none;
}
ul.form-items li {
display: flex; !important;
justify-content: space-between; !important;
width: 200px; !important;
text-align: left; !important;
}
HTML:
<form action="/post_url_tamanioscantidades/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="Phabzw1RqbPnGf2wKo4zoHqWLXogOcfbFR38uxXLeoHeBigRBXhXqO0q9mhFimsB">
<div id="tamanios">
<legend> Selecciona un tamaño</legend>
<ul>
<li>
<span>
<input type="radio" name="tamanios" value="2x2" id="id_tamanios_0" required>
2" x 2" </span>
</li>
<li>
<span>
<input type="radio" name="tamanios" value="3x3" id="id_tamanios_1" required>
3" x 3"
</span>
</li>
<li>
<span>
<input type="radio" name="tamanios" value="4x4" id="id_tamanios_2" required>
4" x 4"
</span>
</li>
<li>
<span>
<input type="radio" name="tamanios" value="5x5" id="id_tamanios_3" required>
5" x 5"
</span>
</li>
</ul>
</div>
<div id="cantidades">
<legend> Selecciona la cantidad</legend>
<ul>
<li>
<span>
<input type="radio" name="cantidades" value="100" id="id_cantidades_0" required>
50
</span> <span>$69</span>
<span class="savings">Ahorra 39%</span>
</li>
<li>
<span>
<input type="radio" name="cantidades" value="100" id="id_cantidades_1" required>
100 </span>
<span>$120</span>
<span class="savings">Ahorra 77%</span>
</li>
<li>
<span>
<input type="radio" name="cantidades" value="150" id="id_cantidades_2" required>
150
</span>
<span>$509</span>
<span class="savings">Ahorra 60%</span
</li>
</ul>
</div>
<input type="submit" value="Submit"/>
</form>
解决方案
尝试将 ul 中的填充设置为 0
ul { padding-left: 0; }
推荐阅读
- excel - 返回一行的最后一个值 - EXCEL
- python - 如何修改 xml 文件中子项的内部文本?
- flutter - 如何解决 Flutter 导航 BuilderContext 子类型错误?
- oracle-cloud-infrastructure - OCI-Ansible 模块 --check Dry 选项在身份验证时失败
- firebase - 使用 Flutter 更新图像时更新 Cloud Firestore 中对图像 url 的所有引用
- html - 如何在我的网站上找到使图像变暗的 css 代码?
- automapper-9 - 将 AutoMapper 从 v6 升级到 v9 并使用分辨率上下文进行单元测试
- php - html, php:需要建议如何简化工作的 html 代码
- angular - Nativescript 和 Stripe 集成:Podfile 中对 Stripe 的依赖重复
- sql - Azure Synapse Analytics(以前的 SQL SW)与 Azure Synapse Analytics(工作区预览版)