html - 如何在一行中有两个按钮

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;

 }

我已经有一个“完成”按钮。我想在完成按钮旁边有另一个名为关闭按钮的按钮。我怎样才能有两个按钮。我试过了，但一个按钮在另一个按钮上面。

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

Answer 1

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

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