CODEWITHSUNDEEP
css
Sonika Yadav
Sonika Yadav

Reputation: 1

Line break through CSS

I want to insert a line break using CSS, there are two classes : select2-search-field and select2-search-choice they are coming in same div as li element Could please suggest any way I could break them to populate in two lines.

I have tried : How to insert a line break before an element using CSS

Following is the code snippet for which I want to achieve line break in

  • between class “select2-search-choice” and "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>

    Upvotes: 0

    Views: 115

    • Answers (2)

    Saw Zin Min Tun
    Saw Zin Min Tun

    Reputation: 632

    use css code " 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>

    Upvotes: 1

    LS_
    LS_

    Reputation: 7149

    You just need to add 'display: block' to the li's if you want them to occupy each one row

    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>

    Upvotes: 0

    Related Questions