Горизонтальное выравнивание метки с флажком и текстом - PullRequest
Новая
       59

Горизонтальное выравнивание метки с флажком и текстом

0 голосов
/ 03 мая 2018

Я пытаюсь выровнять флажки так, чтобы флажки были выровнены друг под другом. Теперь текст выровнен друг под другом. Я бы хотел, чтобы он был посередине горизонтально, но затем, чтобы флажки были выровнены прямо друг под другом. 

<ul class="berocket_aapf_widget  " data-scroll_theme="dark" style="display: block;">
    <li class="">
        <span>
            <input id="checkbox_44" class="checkbox_44" type="checkbox" data-term_id="44" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_44" class="berocket_label_widgets"> Blauw</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_47" class="checkbox_47" type="checkbox" data-term_id="47" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_47" class="berocket_label_widgets"> Rood</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_48" class="checkbox_48" type="checkbox" data-term_id="48" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_48" class="berocket_label_widgets"> Roze</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_82" class="checkbox_82" type="checkbox" data-term_id="82" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_82" class="berocket_label_widgets"> Wit</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_83" class="checkbox_83" type="checkbox" data-term_id="83" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_83" class="berocket_label_widgets"> Zwart</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_84" class="checkbox_84" type="checkbox" data-term_id="84" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_84" class="berocket_label_widgets"> Groen</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_86" class="checkbox_86" type="checkbox" data-term_id="86" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_86" class="berocket_label_widgets"> Multicolor</label>
        </span>
    </li>
            <li class="">
        <span>
            <input id="checkbox_10107" class="checkbox_10107" type="checkbox" data-term_id="10107" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_10107" class="berocket_label_widgets"> Taupe</label>
        </span>
    </li>
            <li class="berocket_widget_show_values" style="display: none;">Show value<span class="show_button"></span></li>
</ul>

https://jsfiddle.net/44d9nqne/

Вот пример того, как это выглядит, флажки не выровнены друг под другом.

Grtz Willem

1 Ответ

0 голосов
/ 03 мая 2018

Если вам нужно, чтобы ваши метки были выровнены по центру, а флажки были расположены по прямой линии (которая была бы слева от вас), подход будет другим.

Проверка скрипка .

Я не думаю, что визуально это хороший способ показать список. Вам также понадобится фиксированная ширина для списка. 

.


.berocket_aapf_widget {
  display: block;
  width: 150px;
  margin: auto; 
}
.berocket_aapf_widget span{
  display: inline-block;
  width: 100%;
}
.berocket_aapf_widget label{
  text-align: center;
display: inline-block;
width: 85%;
}
<ul class="berocket_aapf_widget  " data-scroll_theme="dark" style="display: block;">
        <li class="">
            <span>
                <input id="checkbox_44" class="checkbox_44" type="checkbox" data-term_id="44" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_44" class="berocket_label_widgets"> Blauw</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_47" class="checkbox_47" type="checkbox" data-term_id="47" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_47" class="berocket_label_widgets"> Rood</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_48" class="checkbox_48" type="checkbox" data-term_id="48" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_48" class="berocket_label_widgets"> Roze</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_82" class="checkbox_82" type="checkbox" data-term_id="82" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_82" class="berocket_label_widgets"> Wit</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_83" class="checkbox_83" type="checkbox" data-term_id="83" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_83" class="berocket_label_widgets"> Zwart</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_84" class="checkbox_84" type="checkbox" data-term_id="84" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_84" class="berocket_label_widgets"> Groen</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_86" class="checkbox_86" type="checkbox" data-term_id="86" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_86" class="berocket_label_widgets"> Multicolor</label>
            </span>
        </li>
                <li class="">
            <span>
                <input id="checkbox_10107" class="checkbox_10107" type="checkbox" data-term_id="10107" data-taxonomy="pa_kleur" data-operator="OR"><label for="checkbox_10107" class="berocket_label_widgets"> Taupe</label>
            </span>
        </li>
                <li class="berocket_widget_show_values" style="display: none;">Show value<span class="show_button"></span></li>
    </ul>
...