Reputation: 423

Multiple items same line

I am having a small issue with some html code. I am trying to create a sample document for sparkle release notes, so I created some highlighted boxes containing either "fixed","added" or "improved", and then on the right should go the release notes. What instead happens is that the 'something' word gets pushed onto a new line like a new item but without the dot at the beginning. Is there a way to push it up on the same line as the box??

This is what I have so far:

Index.html

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Release Notes</title>

<body>
    <ul>
    <li><span class='fixed-square'>Fixed</span>Something</li>
    <li><span class='added-square'>Added</span></li>
    <li><span class='improved-square' >Improved</span></li>
</ul>   
</body>

style.css

.fixed-square {
    background-color: #0f0;
    color: white;
    display: block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

.added-square {
    background-color: red;
    color: white;
    display: block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

.improved-square {
    background-color: blue;
    color: white;
    display: block;
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}


body {
    font-family: Verdana;
    font-size: 10pt;
}

Thank you in advance!

EDIT: Thank you very much to all of you, for the quick answer. To recap I went from this:

.improved-square {
    background-color: blue;
    color: white;
    display: block;
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

to this:

.improved-square {
    background-color: blue;
    color: white;
    display: inline-block;  <----------
    height: 20px;
    width: 80px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

Upvotes: 0

Answers (6)

James Preston

Reputation: 1

use inline-block [spam link removed]

Upvotes: 0

krutssss

Reputation: 964

Please see this link Demo

You have to add in css like

   ul li
   {
     display:inline;
     float : left;
     margin :5px;
   }

Upvotes: 0

Richa

Reputation: 4270

.fixed-square {
    background-color: #0f0;
    color: white;
    display: block; // this is actually sending something in second line try adding display: inline-block;
    height: 20px;
    width: 60px;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
}

Upvotes: 0