HTML链接不会改变它们的宽度[重复]答案

【问题标题】：HTML links won't change their width [duplicate]HTML链接不会改变它们的宽度[重复]
【发布时间】：2020-07-20 00:23:04
【问题描述】：

我有一个非常简单的 HTML 文件，其中包含一些样式，但由于某种原因，我无法更改 div 内链接的宽度，我尝试使用宽度、最大宽度、最小宽度和一些不同的容器，例如无序列表，但无论如何，它们都保持相同的大小。

  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>

【问题讨论】：

您是否尝试过将每个包装在一个具有宽度的自己的 div 中？
@MeRay 不要编辑问题以包含不必要的 cmets 和代码。

标签： html css hyperlink width

【解决方案1】：

a 标签是一个内联元素。将其更改为 inline-block 并设置宽度。但是，如果您只是想在链接之间获得更多空间，您可能需要考虑使用 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>

【讨论】：

【解决方案2】：

你只需要添加你的元素<a href="Seiten/Home.html">Home</a>

显示：块；

或

显示：内联块；

来源：Setting a width and height on an A tag

【讨论】：