css - 无法使用 Flexbox 使 div 右对齐
问题描述
我继承了我所欣赏的是一个非常混乱的模态和形式,为了这个问题的目的,我已经将其简化为最基本的结构。
我一直在查看关于 SO 的各种 Flexbox 教程和问题,但是到目前为止,正确证明注释和复选框似乎是一项简单的任务。
<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pull-left" id="flexTest-modal-content">
<div class="form-body">
<form method="POST" id="flexTestForm" action="${SampleAction}">
<ol class="nobullet">
<li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" /> Test Value</label></li>
</ol>
<div class="to-right-justify" id="right-justified-id">
<h5 for="flexTestNotes">Notes</h5>
<label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
</div>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
</div>
.form-body {
display: flex;
flex-direction: row;
}
.to-right-justify {
justify-content: space-between;
float: right;
}
JSFiddle:https ://jsfiddle.net/kilo1981/qzhofsdk/25/
我需要将列表项:“测试值”左对齐(当前位置很好)。但是,我需要与列表项处于同一级别的“注释”标题,仅右对齐,以及“注释”标题下方的开/关复选框。
解决方案
form {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.to-right-justify {
justify-content: space-between;
float: right;
}
<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pull-left" id="flexTest-modal-content">
<form method="POST" id="flexTestForm" action="${SampleAction}">
<ol class="nobullet">
<li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" /> Test Value</label></li>
</ol>
<div class="to-right-justify" id="right-justified-id">
<h5 for="flexTestNotes">Notes</h5>
<label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 在 React 中折叠所有打开的容器
- java - SQL Server 上的加密数据将在 oracle 服务器上解密,而无需从 Oracle 将链接服务器连接回 SQL Server
- python - 按组将 DataFrame 转换为列表
- bootstrap-4 - 更改主题原色
- javascript - 为什么类的值不显示在 HTML 文件中
- fortran - Fortran 90 中的生日概率程序
- ios - 加载一个空的 url 需要多少数据?
- azure - 如何从托管为 azure web 应用程序的 web api core 3.1 响应中删除服务器信息标头?
- docker - Docker 无法从 CLI 登录
- javascript - 对计算器进行编码无法将值附加到显示器