HTML/CSS - side-by-side alignment

Asked

Viewed 46 times

0

I’m trying to align the div with the telephones and the div with the flags side by side, as in the example https://prnt.sc/103tig0 but they stay only under each other. I tried to use display: inline-block; in class .list-telefones but it didn’t work either. You can help me?

Follows code below:

header {
    background: lightgray;
    padding: 5px 0;
}

body {
    font-family: 'Roboto', sans-serif;
}

.caixa {
    position: relative;
    width: 1210px;
    margin: 0 auto;
}


.list-telefones {
    text-align: right;
}
<!DOCTYPE html>
<html lang="pt">
  <head>
    <title>Omnia</title>
    <meta charset="UTF-8" />
    <link rel="icon" href="imagens/OMNIAicon.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <div class="caixa">
        <div class="row">
          <div class="col-sm-3">
            <a href=""><img src="imagens/omnia.png" alt="" /></a>
          </div>
          <div class="col-sm-9">
            <div class="row">
              <div class="col-sm-10">
                <ul class="list-telefones">
                  <li>+55 11 1234-5678</li>
                  <li>+55 11 1234-5678</li>
                </ul>
              </div>
              <div class="col-sm-2">
                <ul>
                  <li>
                    <a href=""
                      ><img src="imagens/bandeira-brasil.png" alt=""
                    /></a>
                  </li>
                  <li>
                    <a href=""><img src="imagens/bandeira-eua.png" alt="" /></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

html css

1 answer

0

Here the code:

  ul{
            margin: 0;
            padding: 0;
        }
      li{
          list-style: none;
          display: inline;
          padding: 8px;
      }
      .box{
          margin-left: 65%;
      }
      .box2{
          margin-left: 85%;
          margin-top: -18px;
      }
      header{
          background-color: lightgray;
          padding-bottom: 3%;
      }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Omnia</title>
    </head>
    <body>
        <header>
            <div class="container">
               <div class="phones">
                   <div class="box">
                   <ul>
                       <li>+55 11 1234-5678</li>
                       <li>+55 11 1234-5678</li>
                   </ul>
                   </div>
               </div>
               <div class="bandeiras">
                   <div class="box2">
                   <nav>
                       <ul>
                           <li><a href="#"><img src="#"></a></li>
                           <li><a href="#"><img src="#"></a></li>
                       </ul>
                   </nav>
                   </div>
               </div>
            </div>
        </header>
    </body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.