我在一个按钮中有两个跨度标签，这里的问题是这两个跨度标签的行为就像一个块元素？答案

【问题标题】：I have two span tags in a button, here the problem is those two span tags are behaving like a block element?我在一个按钮中有两个跨度标签，这里的问题是这两个跨度标签的行为就像一个块元素？
【发布时间】：2019-09-22 18:20:45
【问题描述】：

我正在开发一个 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

这是 FlightButton.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; */
}

这是可重用的按钮，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%;
}

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

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

【讨论】：