我想在我的 html 網站上顯示一個物件的價格。這就是我希望它看起來的樣子：
- 動態的
- 容器以頁面為中心，最大寬度為 400 像素
- “價格”字串在最左側，而實際價格在居中內容的右側
這是我的 html 的樣子：
<div class="price-container">
<div class="price">price:</div>
<div class="price-number">{{ event.price }}.00</div>
</div>
這就是我的 CSS 的樣子：
.price-container{
font-family: Montserrat;
text-transform: uppercase;
color: white;
font-weight: 700;
font-size: 20px;
width: 90%;
max-width: 400px;
}
.price{
float: left;
}
.price-number{
float: right;
}
uj5u.com熱心網友回復：
如果要水平居中，則需要添加margin:auto. 我還為你清理了花車。
.price-container{
font-family: Montserrat;
text-transform: uppercase;
color: black;
font-weight: 700;
font-size: 20px;
width: 90%;
max-width: 400px;
margin: auto;
border: 1px solid red;
}
.price{
float: left;
}
.price-number{
float: right;
}<div class="price-container">
<div class="price">price:</div>
<div class="price-number">{{ event.price }}.00</div>
<div style="clear:both"></div>
</div>uj5u.com熱心網友回復：
我們也可以這樣寫：
<div class="price-container">
<div class="price">price:</div>
<div class="price-number">{{ event.price }}.00</div>
</div>
CSS：
.price-container{
font-family: Montserrat;
text-transform: uppercase;
color: black;
font-weight: 700;
font-size: 20px;
width: 90%;
margin: 0 auto;
max-width: 400px;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494780.html
上一篇：將div內的文本與底部中心對齊
下一篇：垂直間距單個段落的行