.activity div(class='') img(src='@/assets/EnterpriseAactivityIcon.png' class='') span 你好 怎么让这个img和span 横着排列 且 对齐

要在HTML中让`<div>`内的`<img>`和`<span>`元素水平排列并对齐，您可以使用CSS来设置它们的布局属性。以下是一个例子：

<div class="activity-container">
  <img src="@/assets/EnterpriseAactivityIcon.png" class="activity-icon float-left" alt="活动图标">
  <span class="greeting float-left">你好</span>
</div>

<style>
.activity-container {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 确保内容垂直居中对齐 */
}

.activity-icon,
.greeting {
  margin-right: 10px; /* 添加一些间距，可根据需要调整 */
  display: inline-block; /* 使两者变为行内块级元素，便于水平排列 */
}
</style>

在这个示例中，`.activity-container`应用了Flexbox布局，`float-left`用于使两个元素向左排列，同时设置了外边距使其彼此之间留有空隙。如果希望完全水平对齐，可以考虑去掉`float-left`并使用`justify-content: space-between`在CSS里。

相关问题

<div class="ewm"> <img src="../assets/weixin.png"> <img src="../assets/weibo.png"> <img src="../assets/douyin.png"> <img src="../assets/shipin.png"> </div>让这几个图片之间有50px的间距怎么写css

可以使用 `margin` 属性来为图片之间添加间距。具体来说，可以为 `.ewm` 类添加如下的样式：

.ewm img {
  margin-right: 50px;
}

这样就可以为每个图片元素添加右侧 50px 的外边距，从而实现图片之间的间距效果。如果需要在最后一个图片元素后面去掉间距，可以使用 `:last-child` 伪类来去除最后一个图片元素的外边距：

.ewm img:last-child {
  margin-right: 0;
}

<template v-slot="{ row }"> <div class="cell-center button--default" @click="toDeatil(row.F_card_id)"> <img src="@/assets/images/student-list/icon-detail.png" alt="" /> </div> <div class="cell-center button--default" @click="toDeatil(row.F_card_id)"> <img src="@/assets/images/student-list/icon-detail.png" alt="" /> </div> </template> 怎么加display:flax

你可以在包裹这两个 div 的最外层元素上添加 `display: flex` 样式来使其变为 flex 布局，例如：

<template v-slot="{ row }">
  <div class="flex-container">
    <div class="cell-center button--default" @click="toDeatil(row.F_card_id)">
      <img src="@/assets/images/student-list/icon-detail.png" alt="" />
    </div>
    <div class="cell-center button--default" @click="toDeatil(row.F_card_id)">
      <img src="@/assets/images/student-list/icon-detail.png" alt="" />
    </div>
  </div>
</template>

.flex-container {
  display: flex;
}