我基本上是在尝试对齐 div 元素中的文本以格式化交互式 SI 单位图表。我想在分界线的左侧和右侧创建两列内容。左边有前缀(centi-、milli- 等)，右边有相应的值(10^-2、10^-3 等)。将光标悬停在图表中的某个元素上时，我希望图表的整个水平部分的背景颜色发生变化(例如，同时具有 centi- 和 10^-2 的水平部分)。我尝试分割 div 元素但没有成功，因为列不会正确对齐并且前缀及其对应的值位于不同的行上。代码示例如下。帮助
<body>
<style>
.hover:hover {
background-color:yellow;
}
</style>
<div style="with:300px;border:solid;position:absolute;margin-left:100px;margin-top:200px;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>
</body>最佳答案
.hover div {
display: inline-block
}
.hover:hover {
background-color: yellow;
}<div style="with:300px;border:1px solid;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>Div 默认有 display:block。使这些 div display:inline-block。
关于html - <div> 元素内的 CSS 格式化文本对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53399122/