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 extract the text between two spans with lxml (or BeautifulSoup)?

    How to have different size images fluidly respond CSS?

    How to override external css?

    Show an image from b&w to color as if it were loading (left to right)

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    How to stop one layer going over another

    How do I get this HTML canvas animation to appear on top of my image?

    How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

    How to have a background image size (without affecting the div)?

    How to center links in header using CSS?

    How to reduce space between unordered list and its previous element(center)?

    How to wrap lines in an inline-block with CSS?

    How to put an image at the left side of text without putting the image into css

    Truncate text in floated box and show it entirely when hovering

    How do I execute a LESS guard when a boolean is not true?

    CSS: how to add white space before element's content?

    How can I set up a static Webkit Mask

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    How to layer elements with CSS position property?

    How to have separate images for radio buttons - HTML & CSS

    How to mix 100% height with a minimum height

    How to insert HTML symbol after Bootstrap panel-heading in CSS?

    How to display row of images in a repeater control vertically instead of horizontally

    How to make a box expand a distance from the sides

    How do I make a hamburger menu display on the right side?

    How to animate searchbox length from focusing on the textbox class CSS3?

    How can I delete these arrows?

    How do I change the last textual node child in JavaScript

    How to load dynamic CSS files based on condition

    How to change color and background of whole web site