Question

我基本上是在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>

Answer 1

.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。

CSS格式化<div>元素内的文本对齐方式

1 个答案: