CODEWITHSUNDEEP
htmlcss
kfk
kfk

Reputation: 841

List of circles with css

I want to create an html/css list with css circles and text next to it (I don't want to use bullets for this).

What I am trying to accomplish is here: http://jsfiddle.net/EGGVF/

.menu {
    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 50px;
    color: #fff;
    background: #000;
}

However, the circles appear on top of the list elements and not in line with them. How can I do this in a way that all is in line (bullet+circle+text)?

Upvotes: 0

Views: 5566

Answers (6)

Gokul E
Gokul E

Reputation: 1386

Use float:left in CSS.

ul {
  list-type: none;
}

.menu {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  color: #fff;
  background: #000;
  float: left;
  /* use this */
}
<div class="left-menu">
  <ul>
    <li><span><a class="menu" href="#"></a>Test retest supertest megatest</span></li>
    <li>
      <a class="menu" href="#"></a>
    </li>
  </ul>
</div>

and Span with padding / Margin..

Hope it helps.

Upvotes: 2

Jeroen
Jeroen

Reputation: 63729

So many answers, but I still feel the need to post one that's a bit more comprehensive and simple. First up, here's the code I used:

<div class="left-menu">
    <ul>
        <li><a class="menu" href="#"></a> <p>Test retest supertest megatest</p></li>
        <li><a class="menu" href="#"></a> <p>Test retest supertest megatest</p></li>
    </ul>
</div>

With CSS:

.left-menu .menu {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #000;
    vertical-align: middle;
}

.left-menu p {
    display: inline-block;
    vertical-align: middle;
}

Things to note, in general:

  • Use border-radius: 50% to get circles without needing to change it when width or height changes;
  • I got rid of everything not relevant to this question (fixed menu div, colors, etc);

Then, more specific to the question:

  • Make sure children of the li don't linebreak and create their own line by avoiding display: block and setting inline-block for the a and p;
  • Ensure the a and p vertically align using vertical-align: middle;

Now you're good to go. See this fiddle, or one with some "debugging" info.

Upvotes: 2

Joey Hipolito
Joey Hipolito

Reputation: 3166

You can solve it using a media-object, you can search for it in google, what it is, one way of solving the "media-object" problem is using a flex box.

Check out this site

.Media {
   display: flex;
   align-items: flex-start;
}

.Media-figure {
   margin-right: 1em;
}

.Media-body {
   flex: 1;
}

Whilst the other answer is correct, this solution works on everything when you are suppose to do things like that.

Fiddle

Upvotes: 0

underscore
underscore

Reputation: 6887

Use :before WORKING DEMO

Summary

::before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.

.menu:before {
    background-color: red;
    border-radius: 50px 50px 50px 50px;
    content: "";
    height: 20px;
    margin: 0 0 0 -25px;
    position: absolute;
    width: 20px;
}

Upvotes: 0

Kirk
Kirk

Reputation: 5077

Just simply add this in your css style sheet, and your good to go !!

and if you want, give some space between big circle and the text (padding)

 ul
 {
    list-style-type: none;
 }

 .menu{ 
     position: relative;
     display: inline-block;
     width:1em;
     height:1em;
     border-radius:50px;
     color:#fff;
     background:#000;
     margin-right: 10px; // Add this if you want some space between text and circle
}

Upvotes: 1

Gerard de Visser
Gerard de Visser

Reputation: 8050

This works on the fiddle and will do the trick:

.menu { 
    display: inline-block;
}

Upvotes: 0

Related Questions