我有一個名為 a-text-box 的 div。我想在一個部分之后顯示一個箭頭。我有4個部分。部分 = 2 個單詞。但是當我為我的文本框設定寬度時，箭頭消失了。我真的不知道如何解決這個問題。它應該顯示在“喬納森”之后的箭頭。
JSX：
return (
<Transitions>
<div className={styles.about}>
<h1>Who am I?</h1>
<div className={styles["a-container"]}>
<Undraw1 class={styles.svg} />
<div className={styles["a-text__box"]}>
<Element text="Name" text2="Jonathan" />
<BsFillArrowRightCircleFill className={styles.arrow} />
<Element text="Age" text2="18" />
<Element text="Nationality" text2="Brazilian" />
<Element text="Experience" text2="Junior" />
</div>
</div>
<Btn name="Details" class={styles.btn} />
</div>
</Transitions>
);
CSS：
@media (max-width: 992px) {
.a-container {
width:90%;
.svg{
transform:scale(0.8);
}
.a-text__box {
width:40%;
display: flex;
background-color: var(--primary-color);
border-radius: 27px;
align-items: center;
overflow: scroll;
div {
margin-inline: 20%;
align-items:center;
font-size: 2rem;
display: flex;
flex-direction: column;
.arrowRight {
display: none;
}
.space {
display: none;
}
}
.arrow {
display: block;
}
}
}
}
uj5u.com熱心網友回復：
盡量不要使用 svg 標簽作為具有 diplay 的元素的直接子元素： flex;
<div className={styles["a-text__box"]}>
<Element text="Name" text2="Jonathan" />
<span>
<BsFillArrowRightCircleFill className={styles.arrow} />
</span>
<Element text="Age" text2="18" />
<Element text="Nationality" text2="Brazilian" />
<Element text="Experience" text2="Junior" />
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/481660.html
標籤：javascript html css 反应 jsx
上一篇：獲取Firestore資料時加載
下一篇：字串中位數的斷言錯誤