2017-07-21 142 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