Question

我正在开发一个富文本框。尚未开发为可编辑的DOM。被困在初始阶段。我已将其描述为Flex元素。在cmd+enter我将添加<br>标记。我有一个<a>标记作为Flex元素的直接子标记。添加<a>标记会使该元素远离对齐。如何使<a>元素对齐（应该一个接一个地对齐）。如果我添加一个额外的div，我会修复它。请参阅下文

.my-inline-element {
  border: 2px solid red;
  display: flex;
  height:100px;
}

<div class="my-inline-element">
    <div class="extraDiv">
      item
      <br>
      <a href="3">Item2</a>
      <br>
      sample3
      <br>
      sample4
      <br>
    </div>
 </div>

使用extraDiv类删除DOM会导致对齐噪音。请参阅下文

.my-inline-element {
  border: 2px solid red;
  display: flex;
  height:100px;
}

<div class="my-inline-element">
      item
      <br>
      <a href="3">Item2</a>
      <br>
      sample3
      <br>
      sample4
      <br>
 </div>

如果没有添加extraDiv，是否有可能实现。此外，我不会删除Flex属性

Answer 1

By adding another CSS class to your parent DIV or mentioned the child element as display:block will help to sort out your issue, Lets

试试......

https://jsfiddle.net/jk2sy1f0/

> .my-inline-element {    border: 2px solid red;    display: flex;   
> height:100px; }
> 
> .lineBreak{
>     display:block; }
> 
> <div class="my-inline-element lineBreak">   item   <br>   <a
> href="3">Item2</a>   <br>sample3   <br>sample4   <br> </div>
>

Answer 2

.my-inline-element {
  border: 2px solid red;
  display: flex;
  height:100px;
  flex-direction: column nowrap;
}

点击here

使用折断标签显示Flex

2 个答案: