Question 44845 in Html Question posted in
Some basic documentation can be found here.

CSS not aligning in one row – Html

I have this html/css page, im trying to put in the same row the items of the agenda class , centered in the page

enter image description here

with this code : 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Guia de Pesca Santos</title>
  <link href="css/Style2.css" rel="stylesheet " />
  <style>
    .img {
      height: 150px;
      width: 150px;
      object-fit: cover;
      float: left;
    }
    
    .whatsapp {
      position: fixed;
      bottom: 200px;
      right: 50px;
      z-index: 9999;
    }
    
    .menu {
      display: flex;
      align-items: center;
    }
    
    .contenedor {
      background-color: khaki;
      height: 100vh;
      margin: 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>

  <meta name="viewport" content="width=device-width" , initial-scale=1.0, maxime-scale=1.0>

</head>

<body>
  <header>
    <div class="center">
      <div class="logo"><img src="img/logoDan.jpeg" class="img" />
      </div>
      <!--Logo-->

      <div class="menu">
        <!--Menu-->
        <a href="Index2.html">Home</a>
        <a href="Embarcacoes.html">Embarcacoes</a>
        <a href="Agenda.html">Agenda</a>
        <a href="Galleria.html">Galeria</a>
        <a href="Contato.html">Contato</a>
      </div>

    </div>
    <div class="agenda">

      <a href="#catalog">Xu</a>
      <a href="#about">Xalana</a>
      <a href="#feature">Free Willy</a>
    </div>
  </header>
  <div class="whatsapp">
    <a href="https://wa.me//5511950758677? 
         text=Ola!Voce_Gostaria_de_Pescar_com_a_gente" target="_blank">

      <img src="img/124034.png " width="100" hight="100" alt="Ligue no 
            Nosso WhatsApp" title="Fale Conosco " />
    </a>
  </div>
  <div class="contenedor">

  </div>
</body>

</html>

and this css style page :

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header {
  padding: 20px 0;
  display: flex;
  flex-direction: row;
}

.center {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2%;
}

. logo {
  width: 50%;
  text-align: right;
}

.menu a {
  top: 100px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
}

.barcos a {
  top: 100px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  margin-right: 15px;
  display: flex;
  align- items: center;
}

nav ul {
  display: flex;
  flex-direction: row;
}

nav ul li {
  list-style: none;
  padding: 10px;
  cursor: pointer;
}

.agenda a {
  top: 100px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  margin-right: 15px;
  display: flex;
  flex- direction: row;
  align-items: center;
}

Why XU Xalana and Free Willy are not in the same row like the "menu" class??

Thanks by any help Alejandro

Tags:

2

Answers


  1. 0 
    .agenda{
  display: flex;
  gap: 15px;
  width: 100%;
  justify-content: center;
}

.agenda a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
    <div class="agenda">
  <a href="#catalog">Xu</a>
  <a href="#about">Xalana</a>
  <a href="#feature">Free Willy</a>
</div>
    Login or Signup to reply.
  2. 0

    Stripping down to basics you could apply an inline-flex to the child DIV ( of the header ) elements and then further apply styles to their children

    header{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: flex-start;
}
header > div{
  display:inline-flex;
}


header > div > *,
header > div > div > *{
  margin:0.25em
}
    <header>
  <div class="center">
    <div class="logo"><img src="img/logoDan.jpeg" class="img" /></div>
    <div class="menu">
      <a href="Index2.html">Home</a>
      <a href="Embarcacoes.html">Embarcacoes</a>
      <a href="Agenda.html">Agenda</a>
      <a href="Galleria.html">Galeria</a>
      <a href="Contato.html">Contato</a>
    </div>
  </div>

  <div class="agenda">
    <a href="#catalog">Xu</a>
    <a href="#about">Xalana</a>
    <a href="#feature">Free Willy</a>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search