时间戳

首页 > 解决方案 > 如何将组件放置在另一个组件的右侧

html - 如何将组件放置在另一个组件的右侧

问题描述

我学习了 som React 并完成了本教程，我阅读了几个小时，不明白我是否希望教程中的Home,Contact和AboutComponent 放置在水平而不是垂直的位置

这是它的样子：

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;

有没有办法做我想做的事？

标签： htmlcss

解决方案

这不是一个reactjs问题，而是一个html/css问题。

尝试将此应用于所有li元素：

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

当一个元素显示为inline-block时，该元素不会被推到前一个元素的下方，而是位于右侧。

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

推荐阅读