CODEWITHSUNDEEP
htmlcss
snehal
snehal

Reputation: 1846

How can I draw four circles in single div element?

I am having trouble to draw four circles in single div, as I want to create menu using circles. Please help me to correct code.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="menu">
        <ul>
            <li class="circle">
            </li>
            <li class="circle">


            </li>
            <li class="circle">


            </li>
            <li class="circle">


            </li>
        </ul>
    </div>
</body>

</html>

style.css

.menu ul {

     list-style-type: none;
}
.menu li {
    display: inline;

}
.circle {
    border-radius: 140px;
    width: 140px;
    height: 140px;
    background: #00b4ff;
   margin-left: 75px;


}

Upvotes: 2

Views: 1150

Answers (3)

Marc Audet
Marc Audet

Reputation: 46825

If you adding labels to your menu items as follows:

<div class="menu">
    <ul>
        <li class="circle">One</li>
        <li class="circle">Two</li>
        <li class="circle">Three</li>
        <li class="circle">Four</li>
    </ul>
</div>

Then use the following CSS:

.menu ul {
    list-style-type: none;
}
.menu li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.circle {
    border-radius: 140px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    background: #00b4ff;
    margin-left: 75px;
}

Use display: inline-block (as mentioned in previous answers) and you also need to specify the line-height to be the same as height and then apply vertical-align and text-align to center the text.

See fiddle: http://jsfiddle.net/audetwebdesign/UZbTV/

The result looks like:

enter image description here

Upvotes: 2

nold
nold

Reputation: 498

.menu li {
    display: inline;
}

change this into..

.menu li {  
    display: inline-block;
}

an inline-block will create a block formatting

or you could use 

.menu li {  
    float:left;
}

if your developing for desktop website, be mind that display:inline-flex has poor support in IE 10 below

Upvotes: 2

Nielarshi
Nielarshi

Reputation: 1136

change ur menu li display property to inline-flex.

.menu ul {
     list-style-type: none;

}
.menu li {
    display : inline-flex;
}
.circle {
    border-radius: 20px;
    width: 20px;
    height: 20px;
    background: #00b4ff;
    margin-left: 15px;


}

inline-block also works

Upvotes: 2

Related Questions