Question

我希望我的＆＃34;导航＆＃34;文字显示在图标旁边，但我似乎无法做到。

<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都是块元素，默认情况下宽度为100％。您需要将它们更改为内联块，以便它们只与它们中的内容一样宽。

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

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

Answer 2

.icon和h3是块元素。 Making them inline-block should work：

CSS：

.icon {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
.nav-title {
  display: inline-block;
}

HTML

<h3 class="nav-title">Navigation</h3>

＆＃13;

.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;
}
.icon {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
.nav-title {
  display: inline-block;
}

＆＃13;

<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 class="nav-title"> Navigation</h3>
        </a>

        <div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">

        </div>
      </div>
    </div>
  </div>
</nav>

＆＃13;

使文本显示在图标旁边

2 个答案: