html - CSS - 标签和复选框与其他标签和复选框不对齐
问题描述
我正在进行一项小型调查,我的“复选框标签”和复选框不会与其他标签对齐。所有标签都具有相同的类别。我需要它与其他对齐。
这是我的代码笔的链接,向您展示我的意思:
https://codepen.io/Saharalara/pen/xMGqPa
.labels {
display: inline-block;
text-align: right;
vertical-align: top;
margin-top: 20px;
width: 40%;
padding: 5px;
}
.rightTab {
display: inline-block;
text-align: left;
margin-top: 20px;
vertical-align: middle;
width: 48%;
padding: 5px;
}
.radio,
.checkbox {
position: relative;
left: -44px;
display: block;
padding-bottom: 10px;
}
<div class="rowTab">
<div class="labels">
<label id="checkbox-label" for="changes">What do you think we should do to improve our fabulous toilet if any...</br>there should'nt be any but choose please:</label>
</div>
<div class "rightTab">
<ul id="changes">
<li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Cleanliness</label></li>
<li class="checkbox"><label><input name="prefer" value="2" type="checkbox" class="userRatings">Friendliness</label></li>
<li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Everything, it's shite</label></li>
<li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Nothing, it's fantastic</label></li>
<li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">No changes required, it's is the best toilet I've ever been to</label></li>
</ul>
</div>
</div>
解决方案
推荐阅读
- javascript - 如何在模板字符串中添加换行符
- xcode - 在 OS 10.14.3 和 Xcode 9.0 下与 LAPACK 库链接
- cygwin - 使用 rgbasm 的 Cygwin 中的“常量表达式错误中的非常量操作数”
- c# - 如何在 C# 中基于滚动在 flowlayout 中加载数据(问题:flowlayout freeze)
- scala - 如何在 Scala 中伪造这个接口?
- html - 当孩子使用网格列时水平滚动的网格CSS容器?
- sql - 如何使数据落在 SQL Server 中新创建的 ndf 文件中
- c# - 无法在 UWP 项目中添加对第三方 dll 的引用
- c# - 如何使用 SyndicationItem 在 c# 中创建 rss 内容编码
- django - 没有安装“django-html”文件的文档格式化程序