小编Wil*_*ham的帖子

我有一个图标放置使用:before,其后面的文字有时包裹两三行.当它包装文本时,图标下方.

我正在寻找CSS帮助,以防止文本包装在图标下.

这是一张显示我所指的内容的图片:

目前的CSS:

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before {
    content: "\f1c1";
    font-family: 'FontAwesome';
    color: #999;
    display: inline-block;
    margin: 0px 10px 0 0;
    font-size: 24px;
    vertical-align: middle;
}
.form-title:before {
    float: left;
}

这是我的代码的小提琴: 小提琴

我正在制作一个有云的网站.我希望云从左到右穿过屏幕.我有云移动,但有点卡在一个方面.我想在页面加载时将一些云放在屏幕上.我希望那些云开始移动并从屏幕向右移动,然后从左侧返回并继续前进.

这是一个可以解释得更好的图像:

这是代码:

<div class="clouds">
    <div class="firstCloud">        
        <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>
    </div>  
    <div class="secondCloud">
        <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg>
    </div>
    <div class="thirdCloud">
        <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg>
    </div>    
</div>

.firstCloud {
    position: absolute;
    left: 0;
    top: 150px;
    animation: move 50s linear 2s infinite;
    width: 150px;
}

.secondCloud {
    position: absolute;
    left: 50%;
    top: 200px;
    animation: move 55s linear 0s infinite backwards;
    width: …

我不知道我在做什么,但我一直在努力.我一直试图找到一种方法,为我的三年级(7-8岁)在我的学校网站上添加一个字典搜索框.大多数字典网站都过于复杂,充斥着不恰当的广告.我前几天发现了google/dictionary.com,并一直试图弄清楚如何用它创建自定义搜索.

之前我在这里寻求帮助,并且能够获得一个脚本,将一个单词传递给字典并在iframe中显示结果.哪个工作正常,但它是一个完整的页面,我不能改变iframe页面的大小.

我遇到过这个

http://www.google.com/dictionary/json?callback=dict_api.callbacks.id100&q=school&sl=en&tl=en&restrict=pr%2Cde&client=te

在哪里"学校"是被抬头的词.

但是我无法弄清楚如何设计结果,任何想法？

当我将鼠标悬停在 SVG 中的路径上时，我试图更改路径的填充颜色。我似乎无法让它发挥作用。我认为这是一个 z-index 问题。我已经尝试了我能想到的所有选择器。我更改了路径的顺序，因此它们是 svg 中的最后一个元素。

我正在尝试使用 .wedge 类更改路径，我使用以下方法应用了全局 z 索引：

* {z-index: 1;}

然后在 .wedge 上我增加了 z-index：

.wedge {z-index: 10 !important;)

那行不通。我发现有趣但不确定是否相关，我添加了一个单击功能来更改其中一条路径的填充颜色。这是可行的，如果您单击它，悬停将开始工作。

这是一个代码笔： Codepen

有任何想法吗？