css - 我在一个按钮中有两个 span 标签，这里的问题是这两个 span 标签的行为就像一个 block 元素？

Question

我正在做一个 Reactjs 元素，为此我正在使用 Bootstrap 框架进行设计。在那个我有一个 div，在那个 div 我有一个按钮，在那个按钮我有两个 Span 标签。在第一个跨度标签中，我有图标，在第二个跨度标签中，我有文本。我的问题是在输出中，文本位于图标下方，但我期望的是图标和文本应该并排放置。所以试着帮我调试这个问题。

这是 App.js

import React from 'react';
import './App.css';
import Navbar from './Navbar/Navbar';
import FlightsButton from './FlightsButton/FlightsButton';

function App() {
  return (
    <div className="App">
      <FlightsButton></FlightsButton>
    </div>
  );
}

export default App;

这是 App.css

There is no css in App.css

这是 FlightsButton.js

import React, { Component } from 'react'
import './FlightsButton.css'
import ReusableButtons from '../ReusableButtons/ReusableButtons';


class FlightsButton extends Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <div className='col-12'>
                        <div className='one mt-3 d-inline-block'>
                            <button type='button' className='buttonOne rounded-top'>
                                <span className='flightStyle'>
                                    <i class="fa fa-fighter-jet fa-sm flightLogo"></i>
                                </span>
                                <span className='flightContent pl-2'>
                                    Flights
                                </span>
                            </button>
                        </div>
                        <div className='two mt-3 d-inline-block'>
                            <ReusableButtons>
                                <span className='hotelStyle'>
                                    <i class="fa fa-bed fa-sm hotelLogo"></i>
                                </span>
                                <span className='hotelContent pl-2'>
                                    Hotels
                                </span>
                            </ReusableButtons>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

export default FlightsButton

这是 FlightsButton.css

.buttonOne {
    background-color: #008ca8;
    border: none;
    padding: 0.50%;
    padding-left: 0.50%;
    padding-right: 0.50%;
}

.flightLogo {
    color:white;
}

.hotelLogo {
    color:white;
}

.hotelContent {
    color: white;
    font-weight: 700;
    font-family: -apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
}

.flightContent {
    color: white;
    font-weight: 700;
    font-family: -apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
}

.one {
    margin-right: 1%;
    /* display: inline-block; */
}

.two {
    /* display: inline-block; */
}

这是 ReusableButtons,js

import React, { Component } from 'react';
import './ReusableButtons.css';

class ReusableButtons extends Component {
    render() {
        return (
            <div className='buttonUsage'>
                <button type='button' className='customButtonStyle rounded-top'>
                    {this.props.children}
                </button>
            </div>
        )
    }
}

export default ReusableButtons

这是 ReusableButtons.css

.customButtonStyle {
    background-color: #00b2d6;
    border: none;
    padding: 0.50%;
    padding-left: 0.50%;
    padding-right: 0.50%;
}

Answer 1

我不知道 react ，但我只使用了你代码中的 HTML 和 CSS 并检查了它。看起来不错。
但是，如果您遇到问题，请增加按钮宽度，这会对您有所帮助。