html - 如何让 CSS 三 Angular 形显示在一行而不是垂直

Question

基本上，我想要在页面顶部有一排三 Angular 形。他们应该面朝下。我已经在 CSS 中制作了三 Angular 形，但出于某种原因，它们想要在彼此之上上下移动，而不是排成一排，就像我也需要它们一样。

请有经验的CSS friend 看看？谢谢。

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 demo

Answer 1

您必须将 display:inline 应用于您希望内联显示的那些元素，而不是它们的容器。

在您的情况下，它应该是 inline-block，因为它应该是 inline 元素，其行为与 block 元素相同。阅读更多 here .

---

为 .arrow-down 放置 display:inline-block 并将其从 .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