我目前正在 WordPress 上使用 html5blank 作为父主题构建一个网站。我已经在 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>
最佳答案
试试这个:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
因为容器 .agencyproducts
需要有 text-align:center
并且它的第一个子元素必须显示为 inline-block
.. .然后它们将正确显示。您只需将 a
标记的子标记设置为 display:inline-block
,但不告诉 CSS 应如何对待其父标记。
关于php - WordPress - CSS 样式不适用于连续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45235888/