Блог

Я разрабатываю расширенное текстовое поле. Еще не разработан как редактируемый 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> 

При удалении DOM с extraDiv классом выравнивание становится шумным. См. ниже

 .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 . Кроме того, я не изменяю свойство, подлежащее удалению

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

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

Нажмите здесь