Question

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

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

不在同一行。

我已经使用过CSS display：inline-block，它不起作用。

我应该怎么做才能使跨度和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();

我的card.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

我的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>

Answer 2

默认情况下，段落标记是一个块线元素，这意味着它占据了父对象的整个宽度。您可以在父div中指定其框大小属性，例如：

    box-sizing: border-box;

此属性使子元素的宽度环绕其内容。

Answer 3

使用块元素将获得100％的宽度，但必须将p和span元素保持在同一行，这意味着必须在span元素内放置span标签。

<p>Lorem Ipsum is simply dummy text of <span>18:00</span> the printing and typesetting industry.</p>

p{
 display:block;
}

您有很多方法可以使用flex box在一行中显示它们，但是为此您必须使该子元素成为父元素：

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <span>345.000</span>
</div>

div{
  display:flex;
}

如何使我的span元素和p元素在同一行上？

3 个答案: