CODEWITHSUNDEEP
cssreactjs
Jacky
Jacky

Reputation: 895

How to make my span element and p element on the same line?

I was using React.js to build a component.

When I type p element and span element, the span element will go into the new line

not in the same line.

I have already use CSS display:inline-block and it doesn't work.

What should I do to make my span and p on the same line?

My website on localhost:3000:

enter image description here

What I want is

XXX XX18:00~XX06:00

XXXXXXXXXXX

25℃~30℃ XXXX:30%

My 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();

My 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

My card.css:

   p{
     dispaly:inline-block;
    }

Upvotes: 0

Views: 3303

Answers (3)

codeuix
codeuix

Reputation: 1406

Using block element it will take 100% width but you have to keep p and span element in same line means inside of p element you have to put span tag .

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

p{
 display:block;
}

Their is so many way you can show in one line using flex box also you can do but for that you have to make parent element of that child element:

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

div{
  display:flex;
}

Upvotes: 0

Ange
Ange

Reputation: 138

By default paragraph tag is a block line element meaning it takes the whole width of the parent. You could specify in your parent div that their box-sizing attribute like:

    box-sizing: border-box;

This attribute makes the children elements width wrap around its content.

Upvotes: 0

Steve K
Steve K

Reputation: 9055

Are you sure you are loading the css correctly? Because display:inline-block works here:

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

but for your desired output you should just put the span inside the p tag like so

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

Upvotes: 2

Related Questions