CSS不会对负载生效吗?

时间:2015-09-02 12:47:54

标签: html css

我有一些 CSS ,我一直试图弄清楚,出于某些奇怪的原因,它并不想在加载时生效。

例如,这是加载后直接显示的方式: Text and Icon On load

然后,如果我进入检查元素并更改1个数字的像素,它将恢复为: Image after css change

@Niet the Dark Absol的解决方案: After applying width and height to icon

这可能是由于层次结构问题造成的吗?因为它没有拿起 CSS ,因为它正在挑选别的东西?

HTML:

<div class="additionals">
    <ul>
        <li>
            <div class="fa fa-rocket"></div>
            Increase your efficiency.
        </li>
        <li>
            DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing.
        </li>
    </ul>
</div>

CSS:

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}

.additionals .fa{
    color: #000!important;
    margin: 0 2px 0 0!important;
    position: relative;
    margin-left: -37px;
    font-size: 33px;
    top: 27px;
    left: -6px;
}

JS FIDDLE HERE

3 个答案:

答案 0 :(得分:2)

我会猜测它是因为当浏览器呈现页面时图标字体没有加载,并且它不会重新计算流量。< / p>

尝试为您的图标元素指定widthheight。这应该保留流量中的空间,以便事物在其周围漂浮,而不必触发重新绘制。

答案 1 :(得分:0)

是的,它是从等级制造的。取决于第二个图像,您必须使用两列。一个用于图标,一个用于文本。我不知道你为什么要使用它,但是如果必须的话,你必须做那样的事情:

<div class="additionals">
    <ul>
        <li>
            <div class="fa fa-rocket"></div>
            <div class="li-content"> 
                <p class="content-title">Increase your efficiency.</p>
                <p class="content-text">DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing. </p>
            </div>
        </li>
    </ul>
</div>

和CSS:

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}

//Clear for floated elements
.additionals ul li:after {
    content: " ";
    display: table;
    clear: both;
}

.additionals .fa{
    color: #000!important;
    width: 40px; //Choose any width you like.
    float: left; //Float icon to the left as a column
}

.additionals .li-content {
    width: 360px; // 400px - 40px(icon width)
    float: left; //Float content to left as a colum near of icon
}

答案 2 :(得分:0)

您应该在UL块上定义图标。无需额外的div元素:

HTML:

<div class="additionals">
    <ul class="fa fa-rocket" >
        <li>Increase your efficiency.</li>
        <li>DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing.</li>
    </ul>
</div>

CSS:

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}
.additionals .fa::before {
    margin-left:-45px;
    float:left;
    font-size: 36px;
    color: #000!important;
}

请参阅此example