Question

我正在尝试在导航栏文本链接之间垂直插入空格，似乎无法弄清楚该怎么做。如果有人有什么想法会有所帮助。谢谢。

<!DOCTYPE html>
<html>
<body style="background-color:#C0C0C0">
<head>
</head>
    <title> WM\DB-Will's Movie Database</title>

<div class="menu-bar menu-black">
    <header>
        <nav>
    <center>
    <a href="#" class="menu-bar-item menu-button">Home</a>
    <a href="#" class="menu-bar-item menu-button">Movies</a>
    <a href="#" class="menu-bar-item menu-button">TV</a>
    <a href="#" class="menu-bar-item menu-button">Top Rated Movies</a>
</nav>
</header>
</center>
</div>
</head>
<body>
<h1><center><u> WM\DB</u></center></h1>
<hr />
</body>
</html>

Answer 1

我无法确切地说出您要执行的操作，但您的列表首先是不是垂直的。这将使链接垂直且只有一个换行符-这就是我认为您要尝试执行的'??'。 HTML标签<br>插入一个换行符。

<!DOCTYPE html>
<html>

<head>
  <title> WM\DB-Will's Movie Database</title>
</head>

<body style="background-color:#C0C0C0">
  <div class="menu-bar menu-black">
    <header>
      <nav>
        <center>
          <a href="#" class="menu-bar-item menu-button">Home</a> <br />
          <a href="#" class="menu-bar-item menu-button">Movies</a> <br />
          <a href="#" class="menu-bar-item menu-button">TV</a> <br />
          <a href="#" class="menu-bar-item menu-button">Top Rated Movies</a> <br />
        </center>
      </nav>
    </header>
    <h1>
      <center><u> WM\DB</u></center>
    </h1>
    <hr>
  </div>
</body>
</html>

其他标记更新说明


只能有一个<body>标签。

主要<html>的唯一直属子项应为<head>和<body>。

<title>应该在<head>标记之内。

关闭嵌套标签时要小心。例如：如果在<center>内部打开了<nav>，请确保在使用</center>关闭导航之前，先用<nav>关闭中心标签。

您可以在此网站https://validator.w3.org/#validate_by_input上验证HTML标记

Answer 2

不确定是希望链接之间的空间还是希望链接之间的空间是垂直的，但是如果只是链接之间的空间，请尝试使用CSS在链接标记之间添加边距：

.menu-bar a {
     margin-right: 10px; 
}

.menu-bar a:last-child {
     margin-right: 0 /* no margin on last a */
}

<!DOCTYPE html>
<html>
<body style="background-color:#C0C0C0">
<head>
</head>
    <title> WM\DB-Will's Movie Database</title>

<div class="menu-bar menu-black">
    <header>
        <nav>
    <center>
    <a href="#" class="menu-bar-item menu-button">Home</a>
    <a href="#" class="menu-bar-item menu-button">Movies</a>
    <a href="#" class="menu-bar-item menu-button">TV</a>
    <a href="#" class="menu-bar-item menu-button">Top Rated Movies</a>
</nav>
</header>
</center>
</div>
</head>
<body>
<h1><center><u> WM\DB</u></center></h1>
<hr />
</body>
</html>

在导航栏中的链接文本之间放置空格

2 个答案: