如何使内联元素出现在列中的同一行？答案

【问题标题】：How to make an inline-element appear on the same line within a column?如何使内联元素出现在列中的同一行？
【发布时间】：2023-01-30 03:15:48
【问题描述】：

我有一个与here 提出的问题非常相似的问题。主要区别在于我试图将此文本块放在一列中。这是我的代码

<div class="row" className="list">
   <div class="column">
      <div>
         <span className="number">1. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
   <div class="column">
      <div>
         <span className="number">2. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
   <div class="column">
      <div>
         <span className="number">3. </span>
         <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
      </div>
   </div>
</div>

.row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}
.column {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   flex: 1;
   text-align: left;
   padding: 1em 2em;
   .number {
      display: inline-block;
   }
   .words {
      display: inline-block;
      margin-left: 1em;
      vertical-align: top;
      width: 90%;
   }
}

但是，BLAH BLAH 文本出现在我的 Mac 屏幕上的换行符上，但在更大的显示器上与数字的顶部对齐。有没有一种方法可以将文本“更紧密”地包裹起来（即每行允许更少的单词），以便缩进整个文本块和与数字出现在同一行？

【问题讨论】：

需要澄清：您的 CSS 无效 - 您是否改用 SASS？您的 HTML 也包含无效元素 - 这是应用程序的一部分吗？
className 属性不是 HTML/CSS 的有效属性（您是否以 React 代码为例？），即使 Chrome 似乎仍然可以解释它，但也许在 MAC/Safari 上它无法识别它。将 className 属性替换为标准的 class。
感谢您指出这一点，我编辑了帖子

标签： javascript less

【解决方案1】：

尝试这个：

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-basis: 100%;
  flex: 1;
  text-align: left;
  padding: 1em 2em;
  .number {
    display: inline-block;
  }
  .words {
    display: inline-block;
    margin-left: 1em;
    vertical-align: top;
    width: 90%;
  }
}

<div class="row" className="list">
  <div class="column">
    <span className="number">1. </span>
    <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
  </div>
  <div class="column">
    <span className="number">2. </span>
    <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
  </div>
  <div class="column">
    <span className="number">3. </span>
    <span className="words">BLAH BLAH BLAH BLAH BLAH BLAH</span>
  </div>
</div>

【讨论】：

让我知道这是否是您需要的。
这给了我同样的问题。在我的 Mac 屏幕上，整个文本块都在我的号码下方的一行中。