我想要的結果是這樣的
我目前擁有的
所以我想要的只是標簽緊跟在標題行之后。這個小問題是我正在努力的
Render 陳述句的相關部分
<div className="headtitle">
{items.product.name}
<div className="flexbox-item-tag">{items.product.tags}</div>
</div>
Items.product.name 是包含無人機標題的主標題。Items.product.tag 是必須跟在標題后面的標簽
包含標題和標簽的 headtitle div 的 css。
.headtitle {
color: #333333;
font-family: 'Roboto';
font-size: 16px;
line-height: 24px;
width: 526px;
text-align: left;
margin-top: 0px;
flex-wrap: wrap;
}
標簽類和樣式 css
.flexbox-item-tag {
align-self: flex-start;
background-color: rgba(196, 193, 193, 0.274);
border: #333333;
font-size: 12px;
color: #999999;
width: 111px;
height: 20px;
text-align: center;
line-height: 20px;
}
uj5u.com熱心網友回復：
.flexbox-item-tag應設定為display: inline-block。
該元素是 a div，因此它的默認顯示是block這意味著它將在其自己的“行”、“下”上一個元素上呈現，如您的示例所示。
請注意，您已經設定align-self了元素，如果沒有將父元素設定為flexbox.flexbox-item-tag，它將無法作業。
uj5u.com熱心網友回復：
<div className="headtitle">
<div> {items.product.name} </div>
<div className="flexbox-item-tag">{items.product.tags}
</div>
.headtitle {
color: #333333;
font-family: 'Roboto';
font-size: 16px;
line-height: 24px;
width: 526px;
text-align: left;
display:flex;
margin-top: 0px;
flex-wrap: wrap;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446913.html
標籤：css