मैं चाहता हूं कि मेरा "नेविगेशन" टेक्स्ट आइकन के बगल में दिखाई दे, लेकिन मैं ऐसा करने में सक्षम नहीं हो सकता।

<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>

सीएसएस

.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/

2
John 4 पद 2015, 15:34

2 जवाब

सबसे बढ़िया उत्तर

H3 और .icon div दोनों ब्लॉक एलीमेंट हैं जो डिफ़ॉल्ट रूप से 100% चौड़ाई वाले होंगे। आपको उन्हें इनलाइन-ब्लॉक में बदलने की आवश्यकता है ताकि वे केवल उनके भीतर की सामग्री के रूप में व्यापक हों।

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

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

3
kthornbloom 4 पद 2015, 12:37

.icon और h3 ब्लॉक तत्व हैं। उन्हें बनाना inline-block काम करना चाहिए:

सीएसएस:

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

एचटीएमएल

<h3 class="nav-title">Navigation</h3>
.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;
}
<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>
2
John Bupit 4 पद 2015, 12:39