换行CSS

问题描述 投票:0回答:2

我想使用CSS插入一个换行符,有两个类:select2-search-field和select2-search-choice它们与li元素在同一个div中可以请建议任何方式我可以打破它们填充两行。

我试过了:How to insert a line break before an element using CSS

以下是我想要实现换行的代码片段

  • 类“select2-search-choice”和“select2-search-field”之间 <div class="counterPartyId"> <ul class="select2-choices"> <li class="select2-search-choice"> <div>ABN nv,</div> </li> <li class="select2-search-field" > <label for="s2id_autogen5" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7"> </li> </ul> </div>
  • css
    2个回答
    1
    投票

    使用css代码“display:block”

    li {
      display: block;
     }
    <div class="counterPartyId">
      <ul class="select2-choices">  
        <li class="select2-search-choice">    
            <div>ABN nv,</div>    
        </li>
        <li class="select2-search-field" >    
          <label for="s2id_autogen5" class="select2-offscreen"></label>       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">  
        </li>
      </ul>
    </div>

    0
    投票

    你只需要将'display: block'添加到li中,如果你想让它们占据每一排

    ul li { display: block; }
    <div class="counterPartyId">
                                    <ul class="select2-choices">  
                                                    <li class="select2-search-choice">    
                                                                    <div>ABN nv,</div>    
                                                    </li>
                                                    <li class="select2-search-field" >    
                                                    <label for="s2id_autogen5" class="select2-offscreen"></label>    
    <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">  
                                                    </li>
                                    </ul>
    </div>
    © www.soinside.com 2019 - 2024. All rights reserved.