时间戳

首页 > 解决方案 > 如何使链接和文本处于同一级别

html - 如何使链接和文本处于同一级别

问题描述

我已经在一个测试 HTML 网站上工作了一周，为了学习如何编写 HTML 和 CSS，在处理它时，我遇到了导航问题，因为我想制作顶部文本并且导航链接在同一级别，但它们不是。我尝试在 JSfiddle 上修复它，但它显示错误并且问题仍然存在。这是我用于链接和顶部文本本身的代码：

div.a {
  text-align: center;
  font-size: 150%;
}

header {
  background: #ff0000;
  float: left;
}

.jwimg {
  float: left;
}

.button {
  background-color: #008CBA;
  font-size: 50px;
}

div.b {
  color: white;
  background-color: #000;
  font-size: 200%
}

.topnav {
  text-align: right;
  height: 0cm
}

a:link {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 200%;
}

a:hover {
  color: #ff0000;
}
<!-- Navigation -->
<div class="b">
  <nav>
    <ul class="topnav">
      <a class="link" href="ss"></a>
      <a href="">HOME</a>
      <a href="">GAMES</a>
      <a href="">VIDEOS</a>
      <a href="">CONTACT</a>
    </ul>
  </nav>

  <!-- Title -->
  <h1>
    Joe's Pizza
  </h1>
</div>

感谢您的帮助！

标签： htmlcss

解决方案

使用 CSS 的 FLEXBOX 属性align-items: baseline;

您可以使用 CSS FLEXBOX属性align-items实现您想要的结果，如下面的代码片段所示。

* {
  box-sizing: border-box;
}

/**
* Use flexbox's align-items: baseline property, to achive your result
*/
nav {
  display: flex;
  font-size: 200%;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 25px;
  background-color: #000;
}

nav a {
  text-decoration: none;
  color: #ffffff;
}

nav a:hover {
  color: #ff0000;
}

.brand {
  color: #ffffff;
}

brand a{
  color: #ffffff;
  text-decoration: none;
}

.brand a:hover {
  color: #ffffff;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation li {
  display: inline-block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Joe's Pizza</title>
  </head>
  <body>
    <!-- Navigation -->
    <nav>
      <div class="brand">
        <a href="#"><h1>Joe's Pizza</h1></a>
      </div>
      <div class="navigation">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">GAMES</a></li>
          <li><a href="#">VIDEOS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>

附加评论和修改

您忘记了标签<li>中的项目，所以我添加了它们。<ul>

我修改了代码，所以品牌是一个链接。这样，您可以将用户从任何位置重定向到“HOME”页面。

因为我期望，您不希望所有链接都200%在您的整个页面上，我将其更改为仅在导航中那么大。

建议将您的页面拆分为各种不同的标签，例如<header>、<nav>、<footer>等，因此我将品牌和导航项目组合在<nav>标签中。

这是我的代码，如果您想使用它或直接在浏览器中修改它。

推荐阅读