How to make my menu in html and css horizontal-CodePudding

So I have this menu:

<nav id="lavemenu">
            <a href="index.html">Uvod</a>
            <a href="obrazok.html">Obrazok</a>
            <a href="text.html">Blahozelanie</a>
            <a href="pohladnica.html">Pohladnica k meninam</a>    
    </nav>

and this in css:

#lavemenu {
width:800px;
background: #5EA468;
float: left;
}
nav a {
text-decoration: none;
color: yellow;
background-color: #8E2800;
display: block;
width: 200px;
height: 25px;
padding-top: 6px;
text-align: center;
font-size: 15px;
font-family: Calibri;
}

This is how it looks like I need to have that menu in brown color sorted in a row. Can anyone help?

CodePudding user response：

With Flexbox:

#lavemenu {
  display: flex;
  padding: 0.5rem 1rem;
  background: brown;
  justify-content: space-evenly;
  align-items: center;
}

#lavemenu a {
  color: yellow;
  display: block;
  padding: 0.5rem;
  text-decoration: none;
}

<nav id="lavemenu">
  <a href="index.html">Uvod</a>
  <a href="obrazok.html">Obrazok</a>
  <a href="text.html">Blahozelanie</a>
  <a href="pohladnica.html">Pohladnica k meninam</a>
</nav>

CodePudding user response：

That's because you have set the display property of the anchor tags to be block, which will take up the whole width

You can remove display: block.

And here's something else that you can try. You can use flex and justify-content on the nav element, to play around with the alignment of the anchor tags.

Example:

#lavemenu {
  width:800px;
  background: #5EA468;
  float: left;
  display: flex;
  justify-content: space-between;
}

CodePudding user response：

Update: I misunderstood it earlier. I thought you needed the one in Brown area. You can use simple flexbox or with display:inline-block; property of CSS to do this.

#lavemenu {
  padding:0.5rem 1rem;
  background:brown;
  display:flex;
}

#lavemenu a {
  color: yellow;
  padding:1rem;
  text-decoration:none;
}

<nav id="lavemenu">
        <a href="index.html">Uvod</a>
         <a href="obrazok.html">Obrazok</a>
         <a href="text.html">Blahozelanie</a>
         <a href="pohladnica.html">Pohladnica k meninam</a>    
</nav>

B) Use display:inline-block; to get the menus inline; and no need to use floats.

#lavemenu a {
 display:inline-block;
 padding: 0.5rem 1rem;
}

CodePudding user response：

Change display: block; to display: inline-block; These will only be as wide as their contents.

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div >
  <a  href="index.html">Uvod</a>
  <a href="obrazok.html">Obrazok</a>
  <a href="text.html">Blahozelanie</a>
  <a href="pohladnica.html">Pohladnica k meninam</a>
</div>
  <script src="index.js"></script>
</body>
</html>