Question

我学习了som React，经历了this tutorial，并且阅读了数小时，并且不明白我是否希望本教程中的Home，Contact和About组件成为放置水平而不是垂直

这是它的样子：

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;

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

Answer 1

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

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

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

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

水平定位有很多不同的解决方案，包括桌子，flexbox等。

Answer 2

这是一个css问题，而不是reactjs-这是在页面link上放置元素的指南

Answer 3

您可以使用CSS，

ul{
  padding: 0px;
}

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

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

Demo

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

3 个答案: