如何使CSS三角形连续显示而不是垂直显示

Question

基本上，我想在页面顶部放置一排三角形。 他们应该朝下。 我已经在CSS中制作了三角形，但由于某种原因，它们希望彼此上下浮动，而不是像我一样需要它们连续排列。

可以给有更多CSS经验的人看看吗？ 谢谢。

HTML：

<div class="triangle-container">

    <div class="arrow-down">
    </div>

    <div class="arrow-down">
    </div>

</div>

CSS：

/* BODY */

body
{
    background-color: #eee;
    height: 100%;
    width: 100%;
    z-index: 1;
    padding: none;
    border: none;
    margin: none;
}

/* Triangles! */

.triangle-container
{
    display: inline;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.arrow-down
{
    margin-left:auto;
    margin-right:auto;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:50px solid #FF6A00;
}

jsFiddle演示

Answer 1

您必须将display:inline应用于要内联显示的元素，而不是其容器。

在您的情况下，它应该是inline-block ，因为它应该是行为像block元素的inline元素。 在这里阅读更多。

---

将display:inline-block .arrow-down并将其从.triangle-container删除：

.triangle-container
{
    display: inline; /* Remove this line */
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.arrow-down
{
    display: inline-block; /* Add this line */
    margin-left:auto;
    margin-right:auto;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:50px solid #FF6A00;
}

现场演示： jsFiddle

Answer 2

我在您的.arrow-down类中添加了float:left 。 （并更新了两节课）

在这里提琴： http : //jsfiddle.net/KwKe8/