CODEWITHSUNDEEP
htmlcss
Torrado36
Torrado36

Reputation: 177

Inline text in footer

I want to show the name of a subcategory in one line. Problem is when the name of subcategory consists of 2 words, always show it in 2 lines.

enter image description here

Code:

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}

ul li ul li {
  float: none;
  padding: 5px 0;
  font-weight: normal;
}
<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 1808

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You need to reset width on sub lis .they are also at 25% which makes them really small. add a box-shadow or backgrounds to see where they stand before updating your width reset to nderstand why text is wrapping so fast .

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}
ul li ul li {
  float: none;
  width:auto;/* ====== reset width here */
  padding: 5px 0;
  font-weight: normal;
}
<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Shreevardhan
Shreevardhan

Reputation: 12641

Use flexbox and optionally assign min-width to each child to prevent text from wrapping in new line

footer {
  width: 100%;
  display: flex;
  flex-direction: row wrap;
  justify-content: space-between;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

footer>div {
  display: flex;
  flex-direction: column;
}

footer>div>span {
  text-align: center;
}

footer>div>span:first-child {
  font-weight: bold;
}
<footer>
  <div>
    <span>Heading1</span>
    <span>adfghjklhfds asasasasa</span>
    <span>sasasfdfdfdr asasasasfdfddsds</span>
  </div>
  <div>
    <span>Heading2</span>
  </div>
  <div>
    <span>Heading3</span>
    <span>wqwqwqwqww qwqwqwqwqwqwq</span>
    <span>dsdsdsdsd dsdsdsdsdswqw</span>
  </div>
  <div>
    <span>Heading4</span>
    <span>asasasasqwwq wqwqwqwqwqw</span>
  </div>
</footer>

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Use display:inline for ul li ul li css

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}

ul li ul li {
  float: none;
  padding: 5px 0;
  font-weight: normal;
 display:inline;
}
<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions