php - Wordpress - CSS 样式不适用于一行

Question

我目前正在使用 html5blank 作为父主题在 Wordpress 上构建一个站点。我已经在 HTMl/CSS 上构建了所​​有前端文本页面。当我传输完所有文件后，很多样式都坏了——我已经修复了大部分，但有一个部分我无法修复。它应该是这样的 -

这是它在 Wordpress 站点中的样子 -

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

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

}

此外，前端站点中的行应用了高度规则，但 wordpress 站点中没有。我已经研究过应用特异性规则和 !important 但没有(这也会破坏网站其他部分的其他样式规则)。我真的坚持这一点，并希望得到任何帮助。

这是该部分的完整代码 -

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 并且它的第一个 child 必须显示为 inline-block .. . 然后它们将正确显示。您只将 a 标签的子标签设置为 display:inline-block 但不告诉 CSS 它应该如何对待它的父标签。