Tell me how to align these options? enter image description here

<?php // Время работы $time = '10:00-17:00'; // Выходные $free = ['Суббота', 'Воскресенье']; $weeks = [ 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье' ]; $weeks = array_map(function ($day) use ($time, $free) { $length = mb_strlen($day, 'UTF-8'); $void = str_repeat('&nbsp;', (20 - $length)); return in_array($day, $free) ? $day . $void . 'выходной' : $day . $void . $time; }, $weeks); $week = date('N'); ?> <select class="top-select"> <option value="">Время работы офиса</option> <?php foreach (range(1, 7) as $day) { ?> <?php $selected = ($day == $week ? ' selected' : ''); ?> <option class="top-day-options" value="<?= $day ?>"<?= $selected ?>><?= $weeks[--$day] ?></option> <?php } ?> </select>
  • 2
    divide option in two column - AK ♦
  • @ Alex2222 I see my code :) You have not found a solution for its alignment? I can offer php as a temporary option, if it suits you, I will write it back: watch code - Edward

1 answer 1

Try adding the dir attribute to your select.

I slightly simplified your code, turning it into static HTML and reducing the number of spaces, but the essence is the same

 <select class="top-select" dir='rtl'> <option value="">Понедельник&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Вторник&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Среда&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Четверг&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Пятница&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> </select>

You can also do the same through CSS:

 select { direction: rtl; } 
 <select class="top-select"> <option value="">Понедельник&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Вторник&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Среда&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Четверг&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> <option value="">Пятница&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-17:00</option> </select>

  • Why do I need statics? will the script work then? - Alex2222
  • @ Alex2222 will surely be. Just add an attribute to your markup. I gave a minimal example to show how it will work. Well, that is Your script eventually generates similar HTML. HTML is parsed by the browser. The browser sees the desired attribute (or CSS style) and, according to this, renders elements on the page - Mr. Brightside
  • one
    As I understand it, the author needs alignment both to the left and to the right, in this case your example will not work. I use external libraries like jquery-ui for such purposes - they hide the original select and create their own analog implemented in a div - but with the div you can already do both left and right alignment at the same time + any styles you like - Zhihar
  • @Zhihar it’s understandable that with third-party libs it can be done much nicer. I was repelled by what can be done in the current situation =) - Mr. Brightside
  • @ Mr. Brightside, yes, unfortunately, in the current situation, especially nothing can be done :( html in its current form gives little opportunity to change the properties of the built-in controls :( - Zhihar