html - 行和列中单选按钮的精确对齐
问题描述
如何在水平行中准确对齐单选按钮,同时在垂直列中准确对齐。我必须将单选按钮对齐四行。单选按钮如下所示:
只要文本变大,单选按钮就会向右移动。如果与单选按钮关联的文本较短,则单选按钮向左移动。我希望它们在行和列中正确对齐。下面是我的 HTML:
<div class="row">
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3"> cccc</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">DDDDDDDDDDDDDDDDDDDDDD</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">XXXXXXXXXXXXXXXXXXX</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">ssss</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rrrr </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">sdsdsd</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">jjjj</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">rtrtrtrtrtrtrtrtrt </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">hhhhhhhh</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">jjjjjj</label>
</div>
</div>
</div>
任何帮助将不胜感激。
解决方案
您可以为此使用引导程序
<div class="row">
<div class="col-sm-3"><li>A</li></div>
<div class="col-sm-3"><li>B</li></div>
<div class="col-sm-3"><li>ccc</li></div>
<div class="col-sm-3"><li>GGG</li></div>
</div>
请参阅更多详细信息:- https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex_structure&stacked=h
推荐阅读
- rsocket-java - FragmentationDuplexConnection 发生了什么?
- c# - 需要在 calc 中找到逻辑
- sql - SQL Server 中的百分比
- javascript - 如何使用 html 按钮启动节点 js 命令?
- google-analytics - 一旦页面加载,UTM 参数就会从 URL 中消失
- python - 如何在没有额外点的情况下对带有孔的多边形进行三角剖分
- angular - 以 HHH:MM 格式输入小时的 Angular 自定义验证器
- python - 在 Python 中导入模块时运行一个函数
- hadoop - Impala 表小文件问题
- python - 使用多个熊猫系列的加权和?