gpt4 book ai didi

html -
元素内的 CSS 格式化文本对齐方式

转载 作者:行者123 更新时间:2023-11-28 00:48:30 25 4
gpt4 key购买 nike

我基本上是在尝试对齐 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com