Как сделать мой элемент span и элемент p в одной строке?
Я использовал React.js для создания компонента.
Когда я набираю элемент p и элемент span, элемент span перейдет в новую строку
не в одной строке.
Я уже использовал отображение CSS: встроенный блок, и это не работает.
Что мне делать, чтобы мой диапазон и p находились в одной строке?
Мой сайт на локальном хосте: 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;
}
просто попробуй <p>25℃~30℃<span>降雨機率:30%</span></p>
Ответы 3
Вы уверены, что загружаете 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> По умолчанию тег абзаца представляет собой элемент строки блока, что означает, что он занимает всю ширину родителя. Вы можете указать в своем родительском div, что их атрибут размера окна, например:
box-sizing: border-box;
Этот атрибут заставляет ширину дочерних элементов оборачиваться вокруг их содержимого.
Используя блочный элемент, он будет иметь ширину 100%, но вы должны держать элементы p и span в одной строке, что означает, что внутри элемента p вы должны поместить тег 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;
}
Опечатка ... это должно отображаться, а не отображаться @jacky