如何用图标制作菜单？

Question

我正在尝试实现此UI

这就是我想出来的。

HTML

<div class="row mp-header">

        <span class="mp-key"><span class="sprite circle-o"></span> No Assignment </span>
        <span class="mp-key"><span class="sprite db-circle-o"></span> Assignments in Progress </span>
        <span class="mp-key"><span class="sprite check-o"></span> Assignmments Completed </span>

    </div>

CSS

.mp-key{ display:flex; }

我的结果：

以下是我的实时结果：Fiddle

有人可以给我一点推动吗？

Answer 1

您需要将display: flex;移动到flex-items的父元素。要获得所需的结果，您需要更改您的html（以保持简单）。

这是一种可能的方式：

.flex-row {
    display:flex;
}
.flex-row > .mp-key {
    flex: 1 1 auto;
}

<div class="row mp-header">
     <h2 class="mp-h2"> Monitor Progress: <span class="mp-h4">Sample Report</span></h2>
    <div class="flex-row"> 
        <span class="mp-key">
            <span class="sprite circle-o"></span> No Assignment
        </span>
        <span class="mp-key">
            <span class="sprite db-circle-o"></span> Assignments in Progress
        </span> 
        <span class="mp-key">
            <span class="sprite check-o"></span> Assignmments Completed
        </span>
    </div>
</div>

要完成任务，您可以将精灵放在准备好的<span>元素上，并且不要忘记使用精灵宽度的padding-left，以使对齐保持正确。< / p>

<强>更新 这是您更新的jsFiddle：https://jsfiddle.net/x6pj4Lym/2/

jsFiddle CSS的相关变化：

将所有精灵边距更改为：

.sprite
{
    margin: 0 9px 0 0;
}

更新2：

如果您希望元素靠得更近，您可以这样做：

http://jsfiddle.net/s524kory/

.flex-row {
    display:flex;
    justify-content: center;
}
.flex-row > .mp-key {
    flex: 0 0 auto;
    padding: 0 20px;
}

左对齐版本：http://jsfiddle.net/s524kory/1/