Not full width css horizontal menu - css

Question

Relatively new to CSS, so please bear with my inexperience. I'm trying to create a menu, and after much searching and comparison and reading and copying, I've mostly come up with the format I want. The problem is that I want my menu to be the width of its content, not full width, and the code below (adapted from various examples) yields a full width menu. I've played around with things, but can't seem to identify what makes it full width or not -- it may be that what I want requires a more substantial rewrite.
In case it helps, what I want is a horizontal menu with an outer rectangular border, with width determined by its contents, not automatically full width (or even, not automatically a specified width).
This is my first time posting a question here, so thanks in advance for your help and patience!
<style type="text/css">
*/#menu ul,#menu li,#menu a{
list-style:none;
margin:0;
padding:0;
border:0;
font-family: Arial}
#menu{
border:1px solid #000000;
border-radius:5px}
#menu ul{
background:#ffffff;
padding:5px 10px;
border-radius:5px}
#menu ul:before{
content:'';
display:block}
#menu ul:after{
content:'';
display:block;
clear:both}
#menu li{
float:left;
margin:0px 0px 0px 0px;
border:0px}
#menu li a{
border-radius:5px;
padding:5px 10px 5px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
border:0px;
font-size:15px}
</style>
<div id="menu">
<ul>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
</div>

Answer 1

ul are block level elements are so are 100% wide by default.
Make the ul display as inline-block and it will collapse to the width of it's contents.
Add text-align to the parent as required. Here I used center.
#menu ul,
#menu li,
#menu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-family: Arial
}
#menu {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
#menu ul {
display: inline-block;
background: lightblue;
padding: 5px 10px;
border-radius: 5px
}
#menu ul:before {
content: '';
display: block
}
#menu ul:after {
content: '';
display: block;
clear: both
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
border: 0px
}
#menu li a {
border-radius: 5px;
padding: 5px 10px 5px;
display: block;
text-decoration: none;
text-align: center;
color: #000000;
border: 0px;
font-size: 15px
}
<div id="menu">
<ul>
<li><span>Link1</span>
</li>
<li><span>Link2</span>
</li>
<li><span>Link3</span>
</li>
<li><span>Link4</span>
</li>
</ul>
</div>