我有一些 CSS ,我一直试图弄清楚,出于某些奇怪的原因,它并不想在加载时生效。
这可能是由于层次结构问题造成的吗?因为它没有拿起 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;
}
答案 0 :(得分:2)
我会猜测它是因为当浏览器呈现页面时图标字体没有加载,并且它不会重新计算流量。< / p>
尝试为您的图标元素指定width
和height
。这应该保留流量中的空间,以便事物在其周围漂浮,而不必触发重新绘制。
答案 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