HTML links won't change their width

Question

I have a very simple HTML file with some styles given to it, but for some reason I can't change the width of the links inside of the div, I tried it with width, max-width, min width and with some different containers such as an unordered list, but no matter what, they stay the same size.

  body {
  width: 100%;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}

#navbar {
  margin: 0px;
  padding: 0px;
  height: 10%;
  text-align: center;
}

a:visited,
a:link {
  color: #ffffff;
  border: 2px solid black;
  text-decoration: none;
}

a:hover {
  color: #30cc00;
  background-color: #003333;

<div id="navbar">
  <a href="Seiten/Home.html">Home</a>
  <a href="Seiten/Gedichte.html">Gedichte</a>
  <a href="Seiten/Bücher.html">Bücher</a>
  <a href="Seiten/Aktuelles.html">Aktuelles</a>
  <a href="Seiten/Kontakt.html">Kontakt</a>
</div>

Have you tried wrapping each within an own div with a width? — Stephan Schrijver, Apr 07 '20 at 18:00
@MeRay Don't edit question to include unnecessary comments and code. — j08691, Apr 07 '20 at 18:04

score 1 · Answer 1 · answered Apr 07 '20 at 18:02

the a tag is an inline element. change it to inline-block and set width. However, if you are just trying to get more space between the links you might want to consider using flexbox.

body {
    width: 100%;
    height: 100vh;
    padding: 0px;
    margin: 0px;
}

#navbar {
    margin: 0px;
    padding: 0px;
    height: 10%;
    text-align: center;
}

a{
display:inline-block;
width:100px;

}

a:visited, a:link {
    color: #ffffff;
    border: 2px solid black;
    text-decoration: none;
    
}

a:hover{
    color: #30cc00;
    background-color: #003333;
    }

<!DOCTYPE html>
<html lang="de" dir="ltr" style="background-color: #002050; color: #ffffff;">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stihi</title>
    <link rel="stylesheet" href="index.css">
    <script defer src="index.js"></script>
  </head>

  <body>
      <div id="navbar">
       <a href="Seiten/Home.html">Home</a>
       <a href="Seiten/Gedichte.html">Gedichte</a>
       <a href="Seiten/Bücher.html">Bücher</a>
       <a href="Seiten/Aktuelles.html">Aktuelles</a>
       <a href="Seiten/Kontakt.html">Kontakt</a>
      </div>
  </body>
</html>

score 1 · Answer 2 · edited Apr 07 '20 at 18:26

1

You just need to add in your element <a href="Seiten/Home.html">Home</a>

display: block;

or

display: inline-block;

source: Setting a width and height on an A tag

edited Apr 07 '20 at 18:26

j08691

204,283
31
260
272

answered Apr 07 '20 at 18:03

Henrique Rodrigues

201
2
9

HTML links won't change their width

2 Answers2