如何实现两个span元素上下排列？现有Angular代码调试方法无效

嘿，我来帮你搞定让两个<span>上下显示的问题！

首先得搞清楚：<span>是行内元素，默认会和其他行内元素并排显示，所以你需要改变它们的布局方式。你之前尝试的方法没效果，是因为方向不对——比如给<div>设display: inline会让它变成行内容器，没法让内部元素换行；而float: left; clear: left如果直接加在span上，会让第二个span跑到图片下方，而不是第一个span的下方，这显然不是你要的结果。

下面给你几个简单有效的解决方案：

方案1：把span改成块级元素 #

直接给两个span添加display: block，让它们各自占满一行，自然上下排列。如果要保持和图片的对齐关系，可以给第二个span加上和第一个span一样的左边距：

<!-- 修改后的HTML -->
<img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? question.profilePicId : defaultUserAvatar}}"/> 
<span ng-if="!question.isOpen" class="margin-left-10 title block-span" ng-bind="question.title | translate"></span> 
<span ng-if="!question.isOpen" class="margin-left-10 block-span" ng-bind="getFirst100CharactersOfQuestion(question)"></span>

对应的CSS：

.block-span {
  display: block;
  /* 可选：给两个span之间加一点间距 */
  margin-bottom: 6px;
}

方案2：用Flex容器包裹两个span #

把两个span放进一个Flex容器里，设置垂直排列，这样既能让它们上下叠放，还能轻松控制间距和对齐方式，同时不影响图片的位置：

<!-- 修改后的HTML -->
<img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? question.profilePicId : defaultUserAvatar}}"/> 
<div class="vertical-spans" ng-if="!question.isOpen">
  <span class="margin-left-10 title" ng-bind="question.title | translate"></span> 
  <span ng-bind="getFirst100CharactersOfQuestion(question)"></span>
</div>

对应的CSS：

.vertical-spans {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 控制两个span之间的间距 */
  display: inline-block; /* 让容器和图片并排 */
}
.vertical-spans span:last-child {
  margin-left: 10px; /* 让第二个span和第一个span左边对齐 */
}

方案3：用Grid布局（更简洁） #

如果你的浏览器支持Grid，也可以用Grid来实现，代码更简洁：

.vertical-spans {
  display: grid;
  gap: 6px;
  display: inline-block;
}
.vertical-spans span:last-child {
  margin-left: 10px;
}

这几种方法都能完美解决你的问题，选哪种取决于你的整体布局需求～

内容的提问来源于stack exchange，提问作者Vaibhav More