我正在尝试重现以下导航菜单，但在按钮的布局和间距方面存在一些问题。
我也可以使用 Composer 按钮将图标设置为背景图像吗？
原来的：
我的尝试：
HTML：
<div class="options">
<nav class="mainOptions">
<ul>
<li><a class="composer" href="#">Composer</a></li>
<li><a href="#">Address Books</a></li>
<li class="active"><a href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
<li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
</ul>
</nav>
CSS：
.options{
width:100%;
height:50px;
}
.mainOptions{
float:left;
margin:0 15px 0 20px;
color:#fff;
width:700px;
height:50px;
}
.mainOptions a.composer{
width:50px;
height:40px;
color:#fff;
background: #184c82; /* Old browsers */
background: -moz-linear-gradient(top, #184c82 0%, #022243 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184c82), color-stop(100%,#022243)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #184c82 0%,#022243 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #184c82 0%,#022243 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #184c82 0%,#022243 100%); /* IE10+ */
background: linear-gradient(top, #184c82 0%,#022243 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184c82', endColorstr='#022243',GradientType=0 ); /* IE6-9 */
}
.mainOptions .composerIcon{
display:inline-block;
width:14px;
height:14px;
background:url('../images/composer.png') no-repeat -96px -72px;
}
.mainOptions ul li{
display:inline-block;
padding:4px 10px 4px;
border-radius:4px;
}
.mainOptions li a{
text-decoration:none;
font-size:13px;
line-height:18px;
color:#184C82;
}
.mainOptions li{
width:140px;
text-align:center;
}
.mainOptions li.active{
background-color:#7E98B3;
color:#FFF;
}