Question

我正在尝试使用Flexbox进行我目前正在做的一些用户界面工作。我有一组选择框，我用一些基本的CSS设置。我向你提出的问题是，如果没有一两个看起来彼此太近，我怎样才能平均分配设备呢？

＆＃13;

#device-select {
    background: #2d2d2d;
    border-radius: 8px;
    width: 250px;
    display: flex;
    padding: 20px;
}
.rad, .ckb {
    cursor:pointer;
    flex: 1;
    text-align: center;
    color: white;
}
.rad > input, .ckb > input {
    /* Hide original radio and checkboxes */
    visibility: hidden;
    position: absolute;
}
.rad > i {
    font-size: 64px;
    color: #fff;
}
.rad:hover > i {
    /* HOVER <i> STYLE */
    color: wheat;
}
.rad > input:checked + i {
    color: purple;
}

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="device-select">
    <label class="rad">
        <input type="radio" name="device-choice" value="desktop" /> <i class="fa fa-desktop"></i>
Desktop</label>
    <label class="rad">
        <input type="radio" name="device-choice" value="tablet" /> <i class="fa fa-tablet"></i>
Tablet</label>
    <label class="rad">
        <input type="radio" name="device-choice" value="mobile" /> <i class="fa fa-mobile"></i>
Mobile</label>
</div>

＆＃13;

Answer 1

请从flex: 1;

中删除.rad, .ckb

新代码应

.rad, .ckb {
    cursor:pointer;    
    text-align: center;
    color: white;
}

Answer 2

从flex:1;课程中移除.rad, .ckb就行了不起。检查JsFiddle。

另请阅读this以了解有关弹性属性的更多信息。

Answer 3

你可以在#device-select内有DIV，然后在这些DIV中你会有LABEL吗？因此，您可以将边距或填充应用于LABEL标记。当然，只有当你想要另一个DIV作为LABELs包装时才会这样。

同样使用display的空间元素：flex;

3 个答案: