0

Basically, I want a row of triangles on the top of the page. They should be down facing. I've made the triangle in CSS but for some reason they want to go up and down on top of each other and not in a row like I need them too.

Can someone with more experience in CSS please take a look? Thanks.

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

4

2 回答 2

5

You must apply display:inline to those elements which you want to be displayed inline, not their container.

In your case, it should be inline-block, because it should be inline element which behaves as block element. Read more here.

Put display:inline-block for the .arrow-down and remove it from .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;
}

Live demo: jsFiddle

于 2012-09-30T17:09:32.203 回答
2

I added a float:left to your .arrow-down class. (and updated a couple of classes)

Fiddle here : http://jsfiddle.net/KwKe8/

于 2012-09-30T17:09:13.347 回答