html - 使文本出现在图标旁边

Question

我希望我的“导航”文本出现在图标旁边，但我似乎无法做到这一点。

<nav class="nav-mobile">
                    <div class="navbar">
                      <div class="navbar-inner">
                        <div class="container-fluid">
                          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <div class="icon"><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span><span class="icon-bar">&nbsp;
                              </span></div> <h3> Navigation</h3></a>

                          <div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">

                          </div></div></div></div>
                    </nav>

CSS

.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #6c6d71;
}


nav .btn-navbar
{
    display: block;
    padding: 10px 15px;
    border-top: solid 1px #d7d7d7;
    border-bottom: solid 1px #d7d7d7;
}

https://jsfiddle.net/fLhrgw63/1/

Answer 1

H3 和 .icon div 都是 block 元素，默认宽度为 100%。您需要将它们更改为内联 block ，以便它们的宽度仅与其中的内容一样宽。

.icon, h3 {
  display:inline-block;
  vertical-align:middle;
}

https://jsfiddle.net/fLhrgw63/3/