I'm trying to add some symmetry to this list of buttons.
The picture shows how it looks currently, and I've pasted the 1st part of the code below the picture.
Can someone advise what to add to the code to make these buttons line up in a better way?
I've thought about just adding it all to a table, but figured there would be a better way.
<style>
body {
font: test;
margin: 25<span id="selection-marker-1" class="redactor-selection-marker"></span>px;
}
}
.tags {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.tags li {
float: left;
color: #ffffff;
}
.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}
.tag:hover {
background-color: maroon;
color: white;
}
.tag:hover::after {
border-left-color: maroon;
}<span id="selection-marker-1" class="redactor-selection-marker"></span>
</style>
<h2>M27500 Parts by Inner Conductor</h2>
<br />
<ul class="tags">
<li><a href="/products/grid/mil-spec-cable/m27500-anatomy?category=m27500" class="tag">All M27500 Cables</a></li>
<li><a href="/products/grid/mil-spec-cable/m27500-anatomy?category=m27500-a-cables" class="tag">A Cables</a></li>
<li><a href="/products/grid/mil-spec-cable/m27500-anatomy?category=m27500-b-cables" class="tag">B Cables</a></li>