Css 将标签与复选框和文本水平对齐
我正在尝试对齐复选框,使复选框在彼此下方对齐。现在,文本彼此对齐。我希望它在中间是水平的,但然后把复选框对齐在一起。Css 将标签与复选框和文本水平对齐,css,checkbox,alignment,center,text-align,Css,Checkbox,Alignment,Center,Text Align,我正在尝试对齐复选框,使复选框在彼此下方对齐。现在,文本彼此对齐。我希望它在中间是水平的,但然后把复选框对齐在一起。 <ul class="berocket_aapf_widget " data-scroll_theme="dark" style="display: block;"> <li class=""> <span> <input id="checkbox_44" class="checkbox_
<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>
-
布劳
-
鲁德
-
罗泽
-
机智
-
兹瓦特
-
呻吟
-
多色
-
灰褐色
显示值
下面是一个看起来像的示例,复选框之间没有对齐
<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>
Grtz Willem如果您需要将标签作为中心对齐,并且复选框成一条直线(位于您的左侧),则方法不同 检查 我不认为这是一个展示清单的好方法。您还需要为列表设置固定的宽度
.
.berocket\u aapf\u小部件{
显示:块;
宽度:150px;
保证金:自动;
}
.berocket_aapf_小部件span{
显示:内联块;
宽度:100%;
}
.berocket_aapf_小部件标签{
文本对齐:居中;
显示:内联块;
宽度:85%;
}
-
布劳
-
鲁德
-
罗泽
-
机智
-
兹瓦特
-
呻吟
-
多色
-
灰褐色
显示值
这正是我需要的,谢谢!