css - 如何让我的 span 元素和 p 元素在同一行？

Question

我正在使用 React.js 构建一个组件。

当我键入 p 元素和 span 元素时，span 元素将进入新行

不在同一行。

我已经使用了 CSS display:inline-block 但它不起作用。

我应该怎么做才能让我的span和p在同一行？

我在 localhost:3000 上的网站:

我想要的是

XXX XX18:00~XX06:00

XXXXXXXXXXX

25℃~30℃ XXXX:30%

我的 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Card from './Card';
import * as serviceWorker from './serviceWorker';
import 'tachyons';

ReactDOM.render(<Card />, document.getElementById('root'));
serviceWorker.unregister();

我的卡片.js

import React from 'react';
import './Card.css';

const Card = () =>{
    return(
        <div>
             <p>嘉義縣</p><span>今日18:00~明日06:00</span>
             <p>陰時多雲短暫陣雨或雷雨</p>
             <p>25℃~30℃</p><span>降雨機率:30%</span>
        </div>      
     );
   }
   export default Card

我的卡片.css:

   p{
     dispaly:inline-block;
    }

Answer 1

您确定您正在正确加载 css 吗？因为 display:inline-block 在这里工作:

p{
  display:inline-block
}

        <div>
             <p>嘉義縣</p><span>今日18:00~明日06:00</span>
             <p>陰時多雲短暫陣雨或雷雨</p>
             <p>25℃~30℃</p><span>降雨機率:30%</span>
        </div>   

但对于您想要的输出，您应该像这样将跨度放在 p 标记内

        <div>
             <p>嘉義縣 <span>今日18:00~明日06:00</span></p>
             <p>陰時多雲短暫陣雨或雷雨</p>
             <p>25℃~30℃ <span>降雨機率:30%</span></p>
        </div>