Menu
<style>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
</style>
<body>
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li><a href="">ABOUT US</a></li>
<li><a href="">MORE ABOUT</a></li>
</ul>
</nav>
</footer>
</body>community! I'm doing basic training on WebDev and ran into a problem with inline positioning.
I created a footer with H3 and nav (ul>li*2). I want H3 to be positioned on the left and li anywhere, but on the same line as H3, in principle (haven't questioned the position relative to the center of the page yet).
Solved the problem through display: inline;, but for each element, but could not find a more elegant solution and without duplication
.class footer {
display: inline;
}
.class h3 {
display: inline;
}
and so on.
Please help me find a competent and elegant solution. Thank you!
<footer class="footer">
<h3>© ALL RIGHTS RESERVED </h3>
<nav class="footermenu">
<ul>
<li><a href="">ABOUT US</a></li>
<li><a href="">MORE ABOUT</a></li>
</ul>
</nav>
</footer>
.footer h3 {
width: fit-content;
margin: 15px 30px;
display: inline;
}
.footermenu nav {
display: inline;
}
686
asked Oct 26 '25 09:10
Try to use flex in order to set the position of elements
footer {display: flex;}
More info here
65
answered Oct 28 '25 23:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With