2017-07-21 139 views
2

我目前正在使用html5blank作爲父主題的Wordpress上建立一個網站。我已經在HTMl/CSS上構建了所​​有的前端文本頁面。當我將所有文件轉移到很多樣式上時 - 我已經修復了大部分文件,但有一部分我無法修復。這是它應該如何看 -WordPress的CSS樣式不適用於行

Front-end version

,這是它的外觀在WordPress網站 -

Wordpress version

當我通過開發工具實地察看了它好像這些規則不適用 -

.agencyproducts { 
    position: relative; 
    display: inline-block; 
    text-align: center; 

} 

此外,前端網站中的行正在應用高度t規則,但不是在WordPress的網站。我已經着眼於應用特殊性規則和!重要但沒有(這也破壞了網站其他部分的其他樣式規則)。我真的堅持這一點,並會感謝任何幫助。

下面是部分的完整代碼 -

section#products { 
 
\t height: 800px; 
 
\t max-width: 100% 
 
} 
 

 
.agencyproducts { 
 
\t position: relative; 
 
    \t display: inline-block; 
 
    \t text-align: center; 
 
} 
 

 
.agencyproducts p { 
 
\t text-align: center; 
 
\t margin: 30px; 
 
} 
 

 
.agencyproducts img { 
 
\t width: 70px; 
 
\t height: 70px; 
 
\t position: relative; 
 
    \t line-height: 1; 
 
    \t top: 50%; 
 
} 
 

 
figure { 
 
    \t text-align: center; 
 
    \t display: inline-block; 
 
    \t max-width: 80px; 
 
    \t height: 100px; 
 
    \t vertical-align: top; 
 
    \t margin: 5px; 
 
    \t font-size: 9px; 
 
    \t margin-bottom: 60px; 
 
    \t 
 
} 
 

 
figure img { 
 
\t padding-bottom: 5px; 
 
} 
 

 
.four { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t border: 0; 
 
} 
 

 
.images { 
 
\t margin-top: 30px; 
 
\t border-bottom: 10px; 
 
} 
 

 
.images img { 
 
\t margin-left: 20px; 
 
\t padding: 10px; 
 
\t 
 
} 
 

 
.chevron { 
 
\t height: 150px; 
 
} 
 

 
.chevron figcaption { 
 
\t margin-top: 20px; 
 
\t font-size: 13px; 
 
\t color: #d3d3d3; 
 

 
\t 
 
} 
 

 
hr.hragency { 
 
    display: block; 
 
    width: 250px; 
 
    margin-top: 0em; 
 
    margin-bottom: 0em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-style: inset; 
 
    border-width: 1px; 
 
    border-color: #F0F0F0; 
 
}
<section id="products"> 
 
<div class="container"> 
 

 
    <div class="row"> 
 
     <div class="twelve columns agencyproducts"> 
 
      <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p> 
 
      <a href="2k4kproduction.html"> 
 
       <figure> 
 
        <img src="images/production.png" alt="Production"> 
 
        <figcaption>2K/4K PRODUCTION</figcaption> 
 
       </figure> 
 
      </a> 
 
      <a href="postproduction.html"> 
 
       <figure> 
 
        <img src="images/post-production.png" alt="Post-Production"> 
 
        <figcaption>POST PRODUCTION</figcaption> 
 
       </figure> 
 
      </a> 
 
      <a href="2d3danimation.html"> 
 
       <figure> 
 
        <img src="images/animation.png" alt="Animation"> 
 
        <figcaption>2D/3D ANIMATION</figcaption> 
 
       </figure> 
 
      </a> 
 
      <a href="adhoc.html"><figure> 
 
       <img src="images/ADHOC.png" alt="ADHOC"> 
 
       <figcaption>ADHOC</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="interactive.html"> 
 
      <figure> 
 
       <img src="images/interactive.png" alt="Interactive"> 
 
       <figcaption>INTERACTIVE & PERSONALISED</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="tvadverts.html"> 
 
      <figure> 
 
       <img src="images/tv-adverts.png" alt="TV ADVERTS"> 
 
       <figcaption>TV ADVERTS</figcaption> 
 
      </figure> 
 
     </a> 
 
     <a href="360video.html"><figure> 
 
      <img src="images/360.png" alt="360 Video and VR"> 
 
      <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption> 
 
     </figure> 
 
    </a> 
 
</div> 
 
</div> 
 
<hr class="hragency"> 
 
<div class="row"> 
 
<div class="images"> 
 
    <div class="four columns"> 
 
     <img src="images/VIDEO.jpg" alt="Video"> 
 
     <img src="images/blog.jpg" alt="blog"> 
 
    </div> 
 
    <div class="four columns"> 
 
     <img src="images/faq.jpg" alt="FAQ"> 
 
     <img src="images/VIDEO.jpg" alt="Video"> 
 
    </div> 
 
    <div class="four columns"> 
 
     <img src="images/blog.jpg" alt="blog"> 
 
     <img src="images/faq.jpg" alt="FAQ"> 
 
    </div> 
 
</div> 
 
</div> 
 
</div> 
 
</section>    
 
<section class="chevron"> 
 
<div class="container">     
 
    <div class="row"> 
 
     <figure> 
 
      <figcaption>SEE MORE</figcaption> 
 
      <i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i> 
 
     </figure> 
 
    </div>  
 
</div> 
 
</section>

+0

是否加載了您的樣式表? – Morpheus

回答

2

試試這個:

.agencyproducts{ 
    width:100%; 
    text-align:center; 
} 

.agencyproducts a{ 
    display:inline-block; 
} 

由於容器.agencyproducts需要有它的text-align:center和第一孩子的必須顯示爲inline-block ...那麼他們將正確顯示。您只將a標記的孩子設置爲display:inline-block,但不要告訴CSS如何處理父母。

+0

對此答案有幫助。您已將display:inline-block添加到「figure」,但它本身被「a」標籤包裹。這是你想要內聯塊的那些「a」標籤。 – Mark

+0

@Michael爲什麼這個工作在我的前端靜態網站,但不是在我的wordpress網站? –

+0

@Michael順便說一下,它的工作.....謝謝你。 –

0

隨着我的理解嘗試追加!important到您的自定義CSS屬性,以覆蓋任何預先存在的樣式屬性。

height: 150px !important; 
+0

我試過它不起作用。 –

+3

如果您需要使用'!important',那意味着您已經做了錯誤的事情。不好的建議 – Morpheus

+1

完全同意和upvoted。您*可以*使用!對於調試CSS很重要。或者在週五晚些時候你想回家。 – Mark