php - How to keep Fix width in between two or more li in select option Dropdown? -

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" >     <option value=""  style="bold"> </option>     <option value=""  style="bold">code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name </option>     <?php             include "config.php";             echo $sup_code="select * supplier status='active' order su_code asc";             $sel_sup_code = mysql_query($sup_code) or die(mysql_error());             while($row_sup_code=mysql_fetch_array($sel_sup_code))             {             ?>                <option value="supplier.php?selectedid=<?php echo $row_sup_code['id']; ?>" >                <li>&nbsp;&nbsp; <?php echo $row_sup_code['su_code']; ?> </li>&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;<li> <?php echo $row_sup_code['su_name'] ?> </li>                 </option>             <?php             }            ?> </select> 

the option tag not allowed have children, can either play around fake spaces (&nbsp) or replace select div submit data through javascript.

---

example of spaces:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select">    <option value=""> </option>    <option value="" style="font-weight: bold">code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</option>    <option value="123">&nbsp;&nbsp; 123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="345">&nbsp;&nbsp; 345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="6789">&nbsp;&nbsp; 6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="10">&nbsp;&nbsp; 10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>  </select>

as see, code varying length causes inconsistencies, therefore must modify number of spaces based on length, example:

0 space before 4 characters code

1 space before 3 characters code

2 spaces before 2 characters code

3 spaces before 1 character code

code - name    1 - 1 character   22 - 2 characters  333 - 3 characters 4444 - 4 characters 

the result this:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" style="font-family:monospace;">    <option value=""> </option>    <option value="" style="font-weight: bold">code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name</option>    <option value="123">&nbsp;123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="345">&nbsp;345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="6789">6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>    <option value="10">&nbsp;&nbsp;10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;lorem ipsum</option>  </select>

please note ensure exact spacing, use monospace font select (i added style="font-family:monospace;".

to conclude, make php code check length of product code , add dynamic space based on that, e.g: ( if length = 4, space = 0 ) etc...

p.s: style="bold" should style="font-weight: bold;".