Flexbox调整复选框的大小(太小) [英] Flexbox resizes a checkbox (too small)

问题描述

我有一个带复选框的HTML公式列表.所有复选框都有一个标签.

I've got a HTML formular-list with checkboxes. All checkboxes have a label.

我正在使用flexbox设置此公式的样式.使用flexbox会使其中一个复选框比所有其他复选框小.原因似乎是该复选框的标签文本太长，因此需要将其包装在下一行中.

I'm styling this formular with flexbox. Using flexbox makes one of the checkboxes smaller than all the others. The reason seems to be that the label text for that checkbox is so long that it needs to be wrapped in the next line.

.filter-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-list input[type=checkbox] {
    margin-right: 2rem;
    height: 20px;
    width: 20px;
}

<li>
    <input class="filterCheckbx" id="filter1" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter1">Hochschule</label>
</li>
<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
    <input class="filterCheckbx" id="filter3" type="checkbox" name="section" value="Bauen & Gestalten">
    <label for="filter3">Bauen & Gestalten</label>
</li>
<li>
    <input class="filterCheckbx" id="filter4" type="checkbox" name="section" value="BWL">
    <label for="filter4">BWL</label>
</li>
<li>
    <input class="filterCheckbx" id="filter5" type="checkbox" name="section" value="Informatik">
    <label for="filter5">Informatik</label>
</li>
<li>
    <input class="filterCheckbx" id="filter6" type="checkbox" name="section" value="Logistik">
    <label for="filter6">Logistik</label>
</li>

当然，这是一个Plunkr演示: http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH ?p =预览

And of course here's a Plunkr demo: http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

以下是flexbox的示例:

Here is an example with flexbox:

有人知道如何解决这个问题吗?

Anybody got an idea how to solve this issue?

推荐答案

添加输入内容:

flex: 1;

对于标签:

flex: 2; 

它对我适用于chrome，firefox，IE.

It works for me on chrome, firefox, IE.

这篇关于Flexbox调整复选框的大小(太小)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！