时间戳

首页 > 解决方案 > 如何使用 React 和 CSS 内联标题和导航链接

css - 如何使用 React 和 CSS 内联标题和导航链接

问题描述

在这里尝试制作网站的前端是我的 Header 的简单 React 代码

import React, { Fragment } from 'react'
import { NavLink } from "react-router-dom";
import './Header.css';


function Header() {
  return (
    <nav>
      <Fragment>
      <h1>
        Your NAME
      </h1>
      </Fragment>
      
      <NavLink exact activeClassName="active" to="/">
        Home
      </NavLink>

      <NavLink activeClassName="active" to="/cart">
        Cart
      </NavLink>

      <NavLink activeClassName="active" to="/Login">
        Login
      </NavLink>

    </nav>
  );
}
export default Header;

这是我的 CSS 表：-

   div {
    text-align: left;
    display: inline block;
    }
    
    nav{
    
    text-align: top right;
    display: inline block;
    padding: 5px;
    background-color: #41a3ee;
   
}

我面临的问题是我无法将它们对齐在单行中，这不是为什么。非常感谢您的帮助。谢谢！！！

标签： cssreactjs

解决方案

你应该使用弹性盒子。请参阅此处的文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

你应该这样做：

nav {
  text-align: top right;
  display: flex;
  padding: 5px;
  background-color: #41a3ee; 
}

推荐阅读