javascript - 任何人都有简单的方法来使用 css 和 html 创建它?
问题描述
我已经用下面的代码做到了这一点,但我这是一种很难做到的方法,任何人都有用css和html创建它的简单方法。
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
解决方案
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
推荐阅读
- database - postgresql 12.3 将现有数据库转换为使用不区分大小写的排序规则?
- javascript - 服务器统计信息(具有管理员角色的人数)
- java - 添加代码,例如如何使用新的 ClassName(){}?
- android - 有什么方法可以使用我的代码获取内部存储的 SQLite 数据库?
- graphql - Sapper:setClient() 正在抛出“在组件初始化之外调用的函数”
- mysql - 警告(代码 1265):行中“性别”列的数据被截断
- elasticsearch - Grok 模式转义 - (连字符)
- python-3.x - 无法打开python编写的PDF文件
- python - 根据条件语句移动熊猫中的列
- python - 如何改进python中的for循环