Wordpress - CSS样式不适用于一行

Question

我目前正在使用html5blank作为父主题在Wordpress上构建网站。我在HTMl / CSS上构建了所​​有前端文本页面。当我将所有文件转移到很多样式已经破坏时 - 我已经修复了大部分文件，但有一部分我无法修复。它应该是这样的 -

这就是它在Wordpress网站上的样子 -

当我通过开发人员工具检查网站时，似乎没有应用这些规则 -

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

}

此外，前端站点中的行正在应用高度规则，但不在wordpress站点中。我已经看过应用特异性规则和！重要但没有（这也会破坏网站其他部分的其他样式规则）。我真的坚持这一点，并希望得到任何帮助。

以下是该部分的完整代码 -

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

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

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

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

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

figure img {
	padding-bottom: 5px;
}

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

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

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

.chevron {
	height: 150px;
}

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

	
}

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>

Answer 1

试试这个：

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

.agencyproducts a{
  display:inline-block;
}

因为容器.agencyproducts需要text-align:center，并且其中的第一个子项必须显示为inline-block ...然后它们才能正常显示。您只需将a标记的子项设置为display:inline-block，但不要告诉CSS如何将其视为父级。

Answer 2

根据我的理解，尝试将!important附加到自定义css属性，以覆盖任何预先存在的样式属性。

height: 150px !important;