Question

我试图在同一行上“尝试这些”，之后就会显示“苹果”块。我做错了什么？

.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，这可确保您的锚在同一行中对齐，然后锚内的跨度也会如所示对齐。然后在他们的两个子容器上使用flex：1的属性，即q => aaa和aaa=>span。这可确保调整大小时灵活。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

只需将white-space:nowrap添加到主容器中，然后将其放回苹果容器中的首字母

我还添加了一个不可破坏的空间来创建文本之间的空间

＆＃13;

.aaa {
  display: flex;
  padding: 20px;
  background-color: #000;
  font-size: 2em;
  white-space: nowrap;
}

.aaa span {
  display: inline;
  color: red;
  justify-content: center;
  white-space: initial;
}

.q {
  background-color: green;
}

＆＃13;

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

＆＃13;

Answer 3

尝试将其放入grid其中＆＃34;尝试这些＆＃34;需要4/12列，苹果需要8/12。或者在table中放置两个部分，只需确保边框不可见。

Answer 4

显示：flex;获取每个内容块并将其视为自己的实体，然后尝试设置它们，但是您有灵活设置。在这种情况下，您使用的是默认值。

基本上，它正在这样做

[any amount]  [any other]
[of content]  [content  ]

您想要设置弯曲方向，使它们彼此重叠，请尝试以下方法：

flex-direction: column;

这应该是输出：

[any amount of content]
[any other content]

对齐跨文本

4 个答案: