Question

我一直在尝试复制一些材料设计按钮，但是在创建“波纹”效果所生成的div时遇到了问题。如果您通过https://codepen.io/AlexStiles/pen/oPomzX转到我的codepen，则会看到该问题。

这是由div引起的（我尝试将其删除并解决了问题）。我尝试添加各种属性，例如font-size和line-height都无济于事。有趣的是，取决于您的浏览器，此问题似乎有不同的影响。在野生动物园中，宽度会大幅增加，然后会减小到铬的宽度。

"use strict";

const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", createRipple);
};

let circle = document.createElement("div");

function createRipple(e) {

    this.appendChild(circle);

    var d = Math.max(this.scrollWidth, this.scrollHeight);

    circle.style.width = circle.style.height = d + "px";

    circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
    circle.style.top = e.clientY - this.offsetTop -  d / 2 + "px";

    circle.classList.add("ripple");
    // setTimeout(function(){
    //     for (let i = 0; i < circle.length; i++)
    //     document.getElementsByClassName("ripple")[i].remove();
    // }, animationTime);
}

button {
    background-color: #4888f1;
    border-radius: 24px;
    display: flex;
    align-items: center;
    outline: 0;
    border: 0;
    padding: 10px 22px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

button .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.5s linear;
    font-size: 0;
    line-height: 0;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

button img {
    width: 20px;
    height: 20px;
}

button *:not(:last-child) {
    margin: 0 8px 0 0;
}

button span {
    color: #fff;
    font-family: Futura;
}

@media screen and (min-width: 1280px) {
    button {
        padding: 0.8vw 1.75vw;
        border-radius: 1.9vw;
    } button img {
        width: 1.55vw;
        height: auto;
    } button span {
        font-size: 0.8vw;
    }
}

<html>
    <head>
        <title>Material Design Components</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <button>
        <span>Add to Cart</span>
    </button>
    <script src="js.js"></script>
</html>

Answer 1

更改

button *:not(:last-child) {
    margin: 0 8px 0 0;
}

收件人

button *:not(:last-child) {
    margin: 0 0 0 0;
}

在Firefox中签入。

Answer 2

添加涟漪元素时，将其设为last-child，因此，边距button *:not(:last-child)的规则将适用于跨度，因为该元素不再是最后一个子元素。

要解决此问题，请从跨度中删除边距：

"use strict";

const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", createRipple);
};

let circle = document.createElement("div");

function createRipple(e) {

    this.appendChild(circle);

    var d = Math.max(this.scrollWidth, this.scrollHeight);

    circle.style.width = circle.style.height = d + "px";

    circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
    circle.style.top = e.clientY - this.offsetTop -  d / 2 + "px";

    circle.classList.add("ripple");
    // setTimeout(function(){
    //     for (let i = 0; i < circle.length; i++)
    //     document.getElementsByClassName("ripple")[i].remove();
    // }, animationTime);
}

button {
    background-color: #4888f1;
    border-radius: 24px;
    display: flex;
    align-items: center;
    outline: 0;
    border: 0;
    padding: 10px 22px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

button .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.5s linear;
    font-size: 0;
    line-height: 0;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

button img {
    width: 20px;
    height: 20px;
}

button *:not(:last-child) {
    margin: 0 8px 0 0;
}

button span:first-child {
    color: #fff;
    font-family: Futura;
    margin:0;
}

@media screen and (min-width: 1280px) {
    button {
        padding: 0.8vw 1.75vw;
        border-radius: 1.9vw;
    } button img {
        width: 1.55vw;
        height: auto;
    } button span {
        font-size: 0.8vw;
    }
}

<html>
    <head>
        <title>Material Design Components</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <button>
        <span>Add to Cart</span>
    </button>
    <script src="js.js"></script>
</html>

当您点击此按钮时，为什么会有一个随机的空间？

2 个答案: