Question

我有一个对话框，我想要并排两个按钮。一个按钮将是“完成”按钮，其他按钮将是“关闭”按钮。

HTML：

    <a href="#" class="embeddedBrosweWindowDoneButton">clickme</a>

的CSS：

 a.embeddedBrosweWindowDoneButton {
 margin:10px 900px 0;
 text-align:center;
 display: block;
 width:50px;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 font-weight: bold;
 line-height: 1;
 /* button color */
 background-color: #173553;
 /* rounded corner */
 border-radius: 5px;
 /* drop shadow */
 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 /* text shaow */
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;

 }

我已经有一个“完成”按钮。我希望在完成按钮的旁边有一个名为close buton的按钮。我怎么能有两个按钮排队。我尝试了但是一个按钮在另一个按钮上。

   a.embeddedBrosweWindowDoneButton:hover {
  background-color: #6D7B8D;
  }

Answer 1

您已将display设置为阻止。它需要设置为inline-block。

如果将其设置为阻止，则元素将在其父容器中驻留在各自的行中。使用inline-block让它们驻留在同一行。

Answer 2

将每个按钮放在div中，并将float属性设置为left。

.buttondiv {
    float: left;
}

Answer 3

这种CSS风格：

display: block;

使按钮设置在不同的行上。如果您同时对它们应用float: right;，则可以将它们设置在彼此旁边。请注意，a）可能想要添加 clearfix ，并且b）反转元素的顺序（在第二个按钮之前添加完成），因为float: right有意外移动它们的倾向。 / p>

Clearfix:

<div style="display: block; clear: both; height: 1px;"></div>

将上面的元素添加到包裹按钮的元素的“底部”，这样它们就不会从它们的位置“松开”并漂浮在盒子外面。

Answer 4

由于它有一个display:block;，你可以指定它width，然后向左或向右浮动它，具体取决于你希望如何设置布局。一旦浮动，另一个将包裹到它的另一侧。

这是一篇关于花车的好文章：http://css-tricks.com/795-all-about-floats/

Answer 5

使用nobr可以帮助您解决此问题。

 <td>
       <nobr><input type="submit" value="Submit">
       <input type="button" value="Return"></nobr>
 </td>

如何在一行中有两个按钮

5 个答案: