中心混合文本和图形的无序列表

Question

我有一个css ul列表，用作导航栏，其中列表的最后（最右边）元素相对于包含表（固定宽度：540px）的位置变化，具体取决于浏览器缩放。有没有办法让整个给定中间元素是一个样式图像（我在下面附上了一个截图来说明）？

中间翻转图像（貌似）我在导航栏中可以使用加密的PayPal表单的唯一方式就像所有其他元素一样表达超链接而没有实际使用不安全的PayPal href链接来获取订单详细信息。

我的外部CSS及相关的html。

#nav {
    width: 100%;
    float: left;
    margin: 0 0 0em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav li {
    float: left;
}

#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: bold;
    font-size:125%;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    background-color: #fff;
}

.hover-effect{ 
    width:93px; 
    height: 36px; 
    background-image:url("images/pp1.gif"); 
    display:block; 
    border:none; 
    color:transparent;
}

.hover-effect:hover{ 
    background-image:url("images/pp2.gif");
}


<table align="center" border="0" width="540">
<tr>
<td>

<ul id="nav">
<li><a href="information.htm">Information</a></li>
<li><a href="filling.htm">Remplissage</a></li>
<li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"><input type="hidden" name="cmd" value="_s-xclick">
<input class="hover-effect" type="submit" name="submit" value="&nbsp;" style= "cursor:pointer">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7----- ... -----END PKCS7-----">

</form></li>
<li><a href="delivery.htm">Livraison</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</td>
</tr>
</table>

Answer 1

Html按要求添加，但没有回复。已经回答了这个问题的建议没有用，因为已经完成了5个建议的答案，没有找到解决这个问题的方法。最后，我自己找到了解决方案：简单地说，＆＃39; margin-left：10px;＆＃39;