How can I solve the problem with Inline for couple elements

user_19329631 0
Viewed 57

<style>
.footer h3 {
    width: fit-content;
    margin: 15px 30px;
    display: inline;
}

.footermenu nav {
    display: inline;

}
</style>
<body>
<footer class="footer">
    <h3>&copy; 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>&copy; 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;
}

enter image description here

css html
3 Answers

Try to use flex in order to set the position of elements

footer {display: flex;}

More info here

user_193071460 

<style>
  .footer h3 {
    width: fit-content;
    margin: 15px 30px;
  }
  
  ul {
    margin-top: 20px;
    display: flex;
  }
  
  a {
    padding-left: 20px;
  }
</style>

<body>
  <footer class="footer" style="display: flex">
    <h3>&copy; ALL RIGHTS RESERVED </h3>
    <nav class="footermenu">
      <ul style="list-style: none;">
        <li><a href="">ABOUT US</a></li>
        <li><a href="">MORE ABOUT</a></li>
      </ul>
    </nav>
  </footer>


</body>

user_193177940

As said @KristiK, flex is a good way.

But you have a wrong. .footermenu nav doesn't have sense in your code. It points to nav elements inside .footermenu. So these are appropriate selectors for styling to nav in your code:

nav or .footermenu or nav.footermenu.

user_170071840
Related