Looking at the title, it seems that I am facing some challenges in centering my li elements within a ul element. Despite experimenting with various solutions like fixed width + inline-block, table and table-cell, I still can't seem to make it work.
In my scenario, there is a button and a ul placed next to each other as both are set to
display: inline;
Any suggestions?
<html>
<head>
<title>2i3</title>
<style>
* {
font-family: Arial, Calibri, sans-serif;
}
#button {
background-color: red;
border: soild red 2px;
border-radius: 200px;
color: white;
font-size: 20px;
margin: 20px;
display: inline-block;
padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#button:hover {
background-color: #830d1e;
box-shadow: 5px 5px 3px #888888;
}
#menu {
list-style-type: none;
text-align: center;
padding: 0px;
margin: 0px;
display: inline;
}
#menu li {
border: solid red 2px;
border-radius: 100px;
padding: 15px;
width: 150px;
display: inline-block;
color: blue;
text-align: center;
font-weight: bold;
cursor: pointer;
}
#menu li:hover {
background-color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="button">O</div>
<ul id="menu">
<li>Guo Yulong</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
EDIT: Apologies for any confusion, what I actually want is to have equal margins set using auto between the li elements.