CODEWITHSUNDEEP
css
IceDawg
IceDawg

Reputation: 327

how to put links in one line [CSS]

I have the following links :

<div class="links">
    <a href="Default.aspx" class="kustomborder">Home</a>
    <a href="#">About Me</a>
    <a href="#">Contacts<span></span></a>
  <a href="#">Contact Author</a>

    <div class="link">

    </div>
</div>

with this css file:

 .links {
    height: 50px;
    display: inline;
        text-align: center;
        padding: 0px 0px 0px 170px;
        margin-right: 0px;
        margin-top: 7px;
        border: none;
        line-height: 25px;
}
    .links a {
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        color: black;
        font-family: Calibri;
        font-size: 13px;
        text-decoration: none;
        padding: 2px 10px;
        border: 1px solid #ccc;
    }

        .links a span {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid #555;
            display: inline-block;
            margin: 2px 7px;
        }

I want the links to show in one line ie: [home] [contacts] [link3] etc

but currently its showing on seperate lines like:

[home][contacts]
[link3]

How can I get them on one line?

Upvotes: 1

Views: 16075

Answers (1)

Joe Enos
Joe Enos

Reputation: 40393

You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.

Upvotes: 3

Related Questions