html - 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>

截图:/image/fzYLj.png

Answer 1

首先，修复您的 HTML(a 标记不能是 ul 的直接子级)

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

然后，有很多方法可以使 li(看起来像按钮)并排显示，这就是其中之一。将其添加到您的 CSS 中:

ul#redbutton li.newbutton {
    float:left;
}

演示: http://jsfiddle.net/Qh8h2/