代码之家 › 专栏 › 技术社区 › user3386779

按钮显示的css样式

css html

user3386779 · 技术社区 · 10 年前

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

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

button display

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

5 回复 | 直到 10 年前

Ruddy 10 年前

所有这些随机的答案都变得令人讨厌。我会这样做,而且最可能是最好的方法是从按钮中移除浮点数 <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

Ganesh Salunkhe 10 年前

尝试此。。

.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

user1846747 user1846747 10 年前

试试这个。。。

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

instanceofnull 10 年前

当您 float: right 他们这里有两个选项:

颠倒它们在HTML中的顺序: https://jsfiddle.net/0omLy88h/1/
将它们放入一个div中,然后 浮动:右侧 该div: https://jsfiddle.net/jjbL91k0/1/

两者都利用 class="group" 自动清除浮动子项的方式, taken from here .

Pranali Maske 10 年前

每个按钮都不需要样式。重要的是你的按钮顺序。

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