這是我正在使用的樣式表。在移動和平板電腦視圖中使用時會出現溢出問題,但在桌面視圖中不會出現任何問題。有人能對此提出解決方案嗎?我正在開發一個reactjs webapp,托管在firebase中。 如果我添加更少的科技語言,它不會顯示任何錯誤。但是當我添加更多的時候,就會出現溢出的問題。那么它將是一個水平可滾動的。
const AboutPageStyles = styled.div`
padding: 20rem 0 10rem 0;
.top-section {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}
.left {
flex: 3;
}
.right {
flex: 2;
}
.about__subheading {
font-size: 2.2rem;
margin-bottom: 2rem;
span {
background-color: var(--deep-dark);
padding: 0%.5rem;
border: 8px;
}
}
.about__heading {
font-size: 3.6rem;
margin-bottom: 3rem;
}
.about__info {
margin-bottom: 4rem;
.para {
max-width: 100%;
}
}
.button {
font-size: 2.2rem;
background-color: ${(props) =>
props.outline ? 'transparent' : 'var(--gray-1)'};
padding: 0.3em 1em;
border-radius: 8px;
display: inline-block;
border: 2px solid var(--gray-1);
color: ${(props) => (props.outline ? 'var(--gray-1)' : 'black ')};
}
.right {
img {
border: 1px solid var(--gray-1);
border-radius: 10px;
}
}
.about__info__items {
margin-top: 15rem;
}
.about__info__item {
margin-bottom: 10rem;
}
.about__info__heading {
font-size: 3.6rem;
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
padding: 10rem 0;
.top-section {
flex-direction: column;
gap: 5rem;
}
.about__subheading {
font-size: 1.8rem;
}
.about__heading {
font-size: 2.8rem;
}
.about__info__heading {
font-size: 3rem;
}
.button {
font-size: 1.8rem;
}
}
`;
<div className="about__info__item">
<h1 className="about__info__heading">My Skills</h1>
<AboutInfoItem
title="FrontEnd"
items={[
'HTML',
'CSS',
'JavaScript',
'C#',
'ReactJS',
'Blazor',
'MAUI',
'XAML',
]}
/>
</div>
請添加框尺寸:邊框;
上一篇vue不能加速了嗎
下一篇c 用json持久化對象