Html 如何将零部件放置在另一零部件的右侧

我学习了som React和go-through，我读了好几个小时，不明白我是否希望教程中的

主页

、

联系人

和

关于

组件的位置是水平的而不是垂直的

这就是它看起来的样子：

Welcome to React Router Tutorial
Home    
Contact     
About    

我想要的是

Welcome to React Router Tutorial  
Home Contact About

从教程代码这里是应用程序

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
            <li><Link to={'/about'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/contact' component={Contact} />
              <Route path='/about' component={About} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./components/Home”导入Home；
从“./components/About”导入关于；
从“./components/Contact”导入联系人；
类应用程序扩展组件{
render（）{
返回(
欢迎来到React路由器教程

家
接触
关于


);
}
}
导出默认应用程序；

---

有什么方法可以满足我的要求吗？

这不是一个

reactjs

问题，而是一个

html

/

css

问题

尝试将此应用于所有

li

元素：

<li style={{display: "inline-block"}}> ... </li>

当一个元素显示为

内联块

时，该元素不会被推到上一个元素的下方，而是位于右侧

---

水平定位有许多不同的解决方案，包括表格、flexbox等。

这是

css

问题，而不是

reactjs

-以下是在页面上放置元素的指南您可以使用

css

实现这一点

ul{
  padding: 0px;
}

ul li{
   display: inline-block;
   margin: 0 10px;
}

ul li:first-child{
   margin-left: 0px;
}