आइकन के बगल में टेक्स्ट बना रहा है

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>

सीएसएस

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

html css

2

John 4 पद 2015, 15:34

Answer 1

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

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

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

3

kthornbloom 4 पद 2015, 12:37

Answer 2

.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

आइकन के बगल में टेक्स्ट बना रहा है

2 जवाब

संबंधित सवाल

नए सवाल