Inline text in footer - html

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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>