html - 使用 LESS 在 div 中水平排列元素

Question

我有一个容器，里面有许多带有渐变背景的正方形，我无法让这些渐变水平显示...我该如何解决？

div.innerContainer {
    padding:5px;

    .purple {
        .size;
        .border-radius;
        .gradient(top, purple,);
    }
    .blue {
        .size;
        .border-radius;
        .gradient(top, blue;);                          
    }
    .green {
        .size;
        .border-radius;
        .gradient(top, green;)                          
    }
    .yellow {
        .size;
        .border-radius;
        .gradient(top, yellow;)
    }
    .orange {
        .size;
        .border-radius;
        .gradient(top, orange;) 
    }
    .red {
        .size;
        .border-radius;
        .gradient(top, red;)
    }
}

这是造成问题的 div，这里是完整代码 - http://jsfiddle.net/T2Xe9/376/ .

Answer 1

您的渐变当前从“顶部”开始。取而代之的是，要进行水平渐变，请使用“向右”或“向左”向右或向左移动。

这是一个例子:

.red {
    .size;
    .border-radius;
    .gradient(to right, red;)
}