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

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 s（你看起来像按钮）并排显示，这是其中之一。将其添加到您的CSS：

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

DEMO： http://jsfiddle.net/Qh8h2/

Answer 2

正如@Arbel所述，除了ul之外，你不能拥有li的直接孩子。

为了并排显示按钮，您可以使用floats，也可以使用display:inline-block;，如下所示：

ul#redbutton li.newbutton {
    display: inline-block;
}

这是一个小提琴：http://jsfiddle.net/hR5mt/

Answer 3

你可以这样做......

ul#redbutton li{
  display:inline;
}

Answer 4

如果你想让你的按钮并排显示，你应该将display:inline;添加到ul＃redbutton li.newbutton css类，如

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

Answer 5

好的，这可能会起作用，但所有你需要做的就是这个。

＆＃13;

<button>Your Text</button><br>
    <button>Your Text</button>

＆＃13;

CSS＆amp; HTML按钮彼此相对而不是并排

5 个答案: