时间戳

首页 > 解决方案 > 将导航按钮与文本对齐

html - 将导航按钮与文本对齐

问题描述

我正在开发一个移动第一页，我正在尝试将导航按钮与文本对齐，我想知道我是否做得正确。（忽略字体差异）这是我需要达到的结果：

在此处输入图像描述

这就是我所做的：

h1 {
    font-family: "BebasNeue";
    color: #016008;
    text-shadow: 2px 2px 2px #000000;
    font-size: 2rem;
}

#boot {
    font-family: "BebasNeue";
    color: #016008;
    text-shadow: 2px 2px 2px #000000;
    font-size: 3rem;
}

.navbutton {
    border: solid 2px #000000;
    border-radius: 15px;
    color: #000000;
    padding: 10px;
    text-decoration: none;
    margin: 10px;
    float: right;
}
<header id="titleHeader">
            <h1><span id="boot">BOOT</span>WORLD<a class="navbutton" href="#navbar">Menu</a></h1>
        </header>

标签： htmlcss

解决方案

您不能在 h1 标签内使用菜单导航按钮。我将它们分开，并将 flex 添加到标题容器以及一些样式到 Menu btn

   body {
   font-size: 16px;
   }

h1 {
    font-family: "BebasNeue";
    color: #016008;
    text-shadow: 2px 2px 2px #000000;
    font-size: 2rem;
}

#boot {
    font-family: "BebasNeue";
    color: #016008;
    text-shadow: 2px 2px 2px #000000;
    font-size: 3rem;
}

.navbutton {
    border: solid 3px #000000;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.5rem;
    color: #000000;
    padding: 6px 20px;
    text-decoration: none;
    margin: 10px;
    float: right;
}

#titleHeader {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
         
        <body>
         <header id="titleHeader">
            <h1><span id="boot">BOOT</span>WORLD</h1> <a class="navbutton" 
         href="#navbar">Menu</a>
        </header>
        </body>

推荐阅读