<!DOCTYPE html> <html> <head> <style> .circle{ width:200px; height:200px; border-radius:50%; position:relative; left:200px; top:200px; background-color:lightblue; } .circle ul{ list-style-type:none; } .circle ul li{ height:50px; width:50%; position:absolute; left:50%; top:37.5%; /* 37.5% = (100%-((50px/200px)*100))/2 */ background-color:red; } </style> </head> <body> <div class="circle"> <ul> <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> <li><a href="">E</a></li> <li><a href="">F</a></li> <li><a href="">S</a></li> </ul> </div> </body> </html>
Run
×
Share