Megamenu的內容正隨著我的< ul > cms標簽的變化而變化
Megamenu的內容正隨著我的< ul > cms標簽而改變2
。ul, ol .col-3{
margin-top: 0rem;
margin-bottom: 1rem;
字體大小: medium;
}
.col-3 {
text-align: left;
width: 100%;
position: relative;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
display: inline-block;
padding-bottom: 4rem;
}
.col-12 {
text-align: left;
width: 100%;
position: relative;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
display: inline-block;
}
.button {
transition: all .3s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: white;
height: 50%;
width: 100%;
line-height:25px;
text-align: center;
color: black;
margin: auto;
}
.button:hover {
box-shadow: 40px;
border: solid;
}
h3 {
margin-top: 0rem;
margin-bottom: 2rem;
position: relative;
max-width: 100%;
margin-bottom: 2rem;
font-weight: bold;
padding-left: 1.5rem;
}
<div class="row"> /span>
<div class="col-3">
<div class="col-12">
<h3 class="size-25">/span>< a href="{config path="/span>web/secure/base_url"}}/brands/shepherd-casters/casters/razer-series. html"><span style="color: #007dbd;">Razer</span>< <a></h3>
<div class="col-content"/span> style="text-align: center; padding-top: 3%; padding-bottom: 3%;">
<a href="https://df239c5e7e.nxcli.net/brands/shepherd-casters/casters/razer-series. html"><img src="https://casterdepot. com/media/Shepherd/RZ03TPP090SWTP05. png" alt=" width="200px。 " 高度="250px;"></a>
</div>/span>
</div>/span>
<div class="col-12">
<div class="col-content"/span> style="text-align: left; padding-top: 3%; padding-bottom: 3%;">
<ul>
<li>動態容量</li>
<li>軸承/軌道</li>
<li>飾面</li>/span>
</ul>/span>
<a href="https://df239c5e7e.nxcli.net/brands/shepherd-casters/casters/razer-series.html"/span>>
<button class="button 3" type="button">> 閱讀更多</button>
</a>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
我想讓 ul, ol CSS 只回應主體內容,而不是頭中的內容。它正在放大標題中的內容,因為它使用了< ol > 標簽。這個網站運行于Magento 2.4.
。uj5u.com熱心網友回復:
嘗試在定義的ul/ol CSS之前添加body類
。例子:
BODY_CLASS ul, BODY_CLASS ol .col-3 {
margin-top: 0rem;
margin-bottom: 1rem;
字體大小:中等。
}
如果<body>標簽沒有一個類,那么你可以使用body來代替BODY_CLASS
uj5u.com熱心網友回復:
我把它弄明白了。原來,標題使用的是基本的ul,ol樣式,所以我把類名改為.bullet-info。頭部超過了我的樣式,所以我不得不給子彈一個自定義的類。
。.bullet-info {
margin-top: 0rem;
margin-bottom: 1rem;
字體大小: medium;
text-align: left;
}
.product-display .col-content {
-webkit-box-shadow: 1px 2px 6px -1px rgb(0 0 0 / 20%) 。
-moz-box-shadow: 1px 2px 6px- 1px rgba(0, 0, 0, 0. 2)。)
-ms-box-shadow。1px 2px 6px- 1px rgba(0, 0, 0, 0. 2)。)
box-shadow。1px 2px 6px -1px rgb(0 0 0 / 50%) 。
padding: 0 1rem 1.5rem;
margin: 0 .5rem .5rem;
text-align: center;
padding-top: 3%;
padding-bottom: 3%;
}
.product-display .row {
max-width: 1360px;
margin: auto;
margin-top: 4rem;
}
.series-text {
margin-top: .5rem;
margin-bottom: .5rem;
position: relative;
max-width: 100%;
text-align: left;
}
.product-name {
margin-top: 0rem;
margin-bottom: 2rem;
position: relative;
max-width: 100%;
margin-bottom: 2rem;
font-weight: bold;
padding-left: 1.5rem;
}
@media only screen and (max-width: 991px) {
.series-text {
margin-top: .5rem;
margin-bottom: .5rem;
position: relative;
max-width: 100%;
字體大小: 1.5rem。
}
}
@media only screen and (max-width: 991px) {
.product-name {
字體大小。2.4rem;
}
}
<div class="col-content">
<ul class="bullet-info">
<li>Dynamic Capacity</li>
<li>軸承/軌道</li>
<li>飾面</li>/span>
</ul>/span>
<a href="https://df239c5e7e.nxcli.net/brands/shepherd-casters/casters/razer-series.html"/span>>
<button class="cd-button" type="button"> 閱讀更多</button>
</a>/span>
</div>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/320579.html
標籤:
上一篇:尋找谷歌作業表陣列公式
下一篇:從產品集合中獲取產品名稱和價格
