Question

我对Web开发还很陌生，因此我决定重新创建一些站点，而无需查看它们的实践来源（在我自己设计和编写代码之前）。一切顺利，直到我在div中添加

标记。

我尝试过的事情：z-index，改用spans，重新启动PC，关闭浏览器，再使用其他浏览器。这可能是菜鸟的错误，也可能是重复的错误。如果它是重复的，我希望您将我链接到另一个问题，而不是在没有上下文的情况下关闭它。我已经尝试搜索它，但找不到任何结果。

问题：

<div id="below-headbar">
    <div id="cloud-based">
        <img src="images/cloud-based.png">
        <h1>CLOUD BASED</h1>
        <p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
    </div>
    <div id="dynamic-pricing">
        <img src="images/dynamic-pricing.png">
        <h1>DYNAMIC PRICING</h1>
        <p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
    </div>
    <div id="print-ready">
        <img src="images/print-ready.png">
        <h1>PRINT READY</h1>
        <p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
    </div>
</div>

这是我要努力工作的HTML。除段落标记内的文本外，其内的所有内容均有效。正如我所说，我已经尝试了一些方法。这是适用于它的CSS：

#below-headbar div p {
    font-family:'Roboto', sans-serif;
    font-weight:400;
    line-height:27px;
    color:#333;
    width:350px;
    height:250px;
    margin:auto;
}

感谢您的帮助/疑难解答。这是JSFiddle（到目前为止，整个网站，正如我所说的，它是另一个要练习的网站的副本）： https://jsfiddle.net/puvnw3a1/2/ 没有图片的网站看起来有些丑陋，但是不用担心。同样，这可能是一些初学者的错误。谢谢。

Answer 1

从font-size: 0;移除#below-headbar，更新小提琴：https://jsfiddle.net/puvnw3a1/7/

Answer 2

快速浏览一下jsfiddle，它显示您的p标记的字体大小为0。

尝试：

#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
font-size: 16px;
}

Answer 3

类似于阿瓦德（Awad）在其评论中所说的，我建议在您的CSS中为font-size设置#below-headbar div p属性，以使其不继承任何其他元素的大小。

段落文字未显示在页面上

3 个答案: