How can I solve the problem with Inline for couple elements-CodePudding

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 >
        <h3>&copy; ALL RIGHTS RESERVED </h3>
        <nav >
            <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;

}```

CodePudding user response：

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

footer {display: flex;}

more info: https://developer.mozilla.org/pl/docs/Learn/CSS/CSS_layout/Flexbox

CodePudding user response：

      <style>
     
    .footer h3 {
        width: fit-content;
        margin: 15px 30px;
        display: inline;
    }
    
    .footermenu nav {
       display: inline;
    
    }
    ul {
      margin-top: 20px;
      display:flex;
     
    }
    a{
      padding-left: 20px;
    }
    
    
      </style>
    
    <body>
        <footer  style="display: flex">
                <h3>&copy; ALL RIGHTS RESERVED </h3>
                <nav >
                    <ul style="list-style: none;">
                        <li><a href="">ABOUT US</a></li>
                        <li><a href="">MORE ABOUT</a></li>
                    </ul>
                </nav>
            </footer>
        
        
        </body>

      <style>
     
    .footer h3 {
        width: fit-content;
        margin: 15px 30px;
        display: inline;
    }
    
    .footermenu nav {
       display: inline;
    
    }
    ul {
      margin-top: 20px;
      display:flex;
     
    }
    a{
      padding-left: 20px;
    }
    
    
      </style>
    
    <body>
        <footer  style="display: flex">
                <h3>&copy; ALL RIGHTS RESERVED </h3>
                <nav >
                    <ul style="list-style: none;">
                        <li><a href="">ABOUT US</a></li>
                        <li><a href="">MORE ABOUT</a></li>
                    </ul>
                </nav>
            </footer>
        
        
        </body>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

          <style>
         
        .footer h3 {
            width: fit-content;
            margin: 15px 30px;
            display: inline;
        }
        
        .footermenu nav {
           display: inline;
        
        }
        ul {
          margin-top: 20px;
          display:flex;
         
        }
        a{
          padding-left: 20px;
        }
        
        
          </style>
        
        <body>
            <footer  style="display: flex">
                    <h3>&copy; ALL RIGHTS RESERVED </h3>
                    <nav >
                        <ul style="list-style: none;">
                            <li><a href="">ABOUT US</a></li>
                            <li><a href="">MORE ABOUT</a></li>
                        </ul>
                    </nav>
                </footer>
            
            
            </body>