html - 在 span 中对齐文本

Question

我试图在同一行上获得“尝试这些”，然后是现在显示的“苹果” block 。我做错了什么？

.aaa {
	display: flex;
  padding: 20px;
	background-color: #000;
	font-size: 2em;
}

.aaa span {
  display: inline;
	color: red;
  justify-content: center;
}

.q {
background-color: green;
}

<div class="q">
<a href="#" class="aaa">Try these <span>apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a>
</div>

Answer 1

您需要进行的更改:

• 将 q class container 和 anchor class aaa 都设置为 flex，这样可以确保您的 anchor 在同一行中对齐，并且然后 anchor 内的跨度也如图所示对齐。然后在它们的两个子容器上使用 flex:1 的属性，即 q => aaa 和 aaa=>span。这确保它们在调整大小时可以灵活调整。

.aaa {
  display: flex;
  flex: 1;
  padding: 20px;
  background-color: #000;
  font-size: 2em;
}

.aaa span {
  flex: 1;
  color: red;
  justify-content: center;
}

.q {
  background-color: green;
  display: flex;
}

<div class="q">
  <a href="#" class="aaa"> Try these &nbsp;<span> apples apples apples apples apples applesapples apples applesapples apples applesapples apples apples</span></a>
</div>