用于按钮显示的CSS样式

Question

我想在右侧显示按钮。现在它也显示在右侧。但我想更改按钮的顺序。

我想按顺序显示添加，编辑和注销。

.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

试试这个......

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

.add,.edit{      
    margin-left: 5px;
}

button.logout{
    display:block;
    float:right;
    margin-left:5px;
}

使用JSFiddle http://jsfiddle.net/DivakarDass/22vcotev/1/

Answer 2

试试这个..

.lout{
float: right; 
 
display: inline-block;
margin-top: 10px;
   }

button.logout{
display:inline;
    background:red;
float:right;
margin-left:5px;
    border-radius:4px;
}
button.add{
display:inline;
    background:rgb(66, 226, 66);
float:left;
margin-left:5px;
    border-radius:4px;
}

button.edit{
display:inline;
    background:rgb(255, 213, 0);
float:left;
margin-left:5px;
    border-radius:4px;
}

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

这是Demo

Answer 3

当你float: right时，元素会颠倒它们的顺序。这里有两个选择：

• 在HTML中反转他们的顺序：https://jsfiddle.net/0omLy88h/1/
• 将它们放入div中，float: right表示div：https://jsfiddle.net/jjbL91k0/1/

两者都使用class="group"自动清算浮动子女的方式，taken from here。

Answer 4

每个按钮都不需要样式。简单来说就是按钮的顺序。

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

而css是 -

.lout{
    float: right;  
    display: inline-block;
    margin-top: 10px;
 }
button{
margin-left:10px;  
display:inline;
float:right;
}

Answer 5

所有这些随机答案都变得烦人。我会这样做的方式，也许最好的方法是从按钮中移除浮动，也可以去除那里的随机<p>。

我们可以简单地使用display: inline-block;，然后设置.logout以使用margin-left: 10px;将其他人推得更远。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Demo with this in your JSFiddle