Стилизовать опции

229

30 ноября 2017, 00:09

Подскажите как выровнять данные опции?

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

Answer 1

Попробуйте добавить атрибут dir в Ваш select (Почитать клац).

Ваш код я слегка упростил, превратив его в статический HTML и уменьшив кол-во пробелов, но суть та же

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

Еще можно сделать то же самое через 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>