CSS和HTML按钮彼此相对而不是并排

Question

基本上我今天遇到的问题是我正在制作的按钮出现在彼此之下而不是并排。

这是我的代码CSS：

（按钮是140 x 32）

/* BUTTON */

a {
    text-decoration: none;
}

ul#redbutton li.newbutton {
    background: url("../images/blank_button.png") no-repeat;
    width: 140px;


    color: #FFFFFF;
    font-weight:bold; 
    text-decoration: none;   
    text-transform:uppercase; 
    text-align:center;
    font-size:12px;   
    line-height:30px;   
}
ul#redbutton li.newbutton:hover {
    background: url("../images/blank_button_hover.png") no-repeat;
    width: 140px;

    color: #FFFFFF;
    font-weight:bold; 
    text-decoration: none;   
    text-transform:uppercase; 
    text-align:center;
    font-size:12px;   
    line-height:30px;   
}
/* BUTTON END*/

HTML：

<ul id="redbutton">
<a href="link.php"><li class="newbutton">TEXT</li></a>
<a href="link.php"><li class="newbutton">TEXT</li></a>
</ul>

屏幕截图：http://i.imgur.com/PcEzSyP.png