how to put links in one line [CSS]


Tags: css3

Problem :

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?



Solution :

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.


    CSS Howto..

    How to import a CSS file from an external bundle resource

    How do I detect a transition end without a JavaScript library?

    How to do valid CSS for li text and li text with image?

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    How to select css id's with numbers in them?

    How to make text all on the same line when adding div tags?

    How to add another text decoration definition with Javascript?

    CSS - How to center Absolute Position div with max width in IE9,10,11

    How to make a horizontal expandable menu fluid

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?

    How to change the media attribute of a css file with plain JS

    JS/JQuery: How to switch class several times in a loop way?

    how to align first li left and second li center in the ul element

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    How to use Auto compiler for less and sass in visual studio

    how to set word break in table th or td, when column and table-layout auto using CSS

    how to make RegEx to match CSS non greedy for a part of the match

    How to fade-in and fade-out background-image with CSS transition?

    How to setup CSS for multiple font choices? [closed]

    How to change background color of elements every 5s using jquery? [duplicate]

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    How to align item to the very bottom within flexible box layout column?

    How to blend canvas to background with CSS?

    CSS How to add a button below an image [closed]

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    How to cover piece of border with element over it?

    How to move hamburger menu to the front of overlay menu

    How to make half-square background in css

    How to show hidden div in the same line as the paragraph text?

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?