html - 按钮显示的css样式

Question

我想把按钮显示在右边，现在IT也在右边显示，但是我想改变按钮的顺序。

我想按添加、编辑、注销的顺序显示。

.lout{
  float: right;  
  display: inline-block;
  margin-top: 10px;
}
.log {
  width:60%;
  height: 10%;
  position:absolute;
  border: 1px solid #f9f2f2;
  border-radius: 10px;

  text-align: center;
  line-height:20px;
  border-width: 0px 0px 1px 1px;
  display:inline-block; 
}
button.logout{
  display:inline;
  float:right;
  margin-right:10px;
}

 <form method="post" class="lout" >  <button name="add"  class="add" onclick="admin()">Add</button> <button name="edit" class="edit" onclick="edit()">Edit</button><p style="padding-left:5px;" > <button class="logout" name="logout" >Logout</button></form>

Answer 1

所有这些随机的答案都变得很烦人。我会这样做的方式，最有可能是最好的方式是从按钮中删除 float 摆脱随机 <p>也在那里。

我们可以简单的使用display: inline-block;然后设置 .logout使用margin-left: 10px;将其他人推开一点.

.lout {
  float: right;
  display: inline-block;
  margin-top: 10px;
}
.add,
.edit,
.logout {
  display: inline-block;
}
.logout {
  margin-left: 10px;
}

<form method="post" class="lout">
  <button name="add" class="add" onclick="admin()">Add</button>
  <button name="edit" class="edit" onclick="edit()">Edit</button>
  <button class="logout" name="logout">Logout</button>
</form>

Demo with this in your JSFiddle