Hi there
This is my js fiddle
I want all these 3 button should float from left to right but its not working
Hi there
This is my js fiddle
I want all these 3 button should float from left to right but its not working
.actionButtonBackground{float:left; }
also, that first .actionButtonBackground is missing the leading “class” dot.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Float All Buttons Right</title>
<style>
.actionButtonBackground{
background:#ECECEC;
background:-webkit-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
background: -o-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
background:-linear-gradient(top,#E4F3FC 0%,#C5E6F9 100%);
background:-moz-linear-gradient(top,#ECECEC 0%,#C5E6F9 100%);
border:1px solid #2FD4FF;
color:#000;
padding:3px;
font-family: 'trebuchet ms', geneva;
border-radius:3px;
font-size:13px;
width:50px;
line-height:12px;
}
.actionButtonBackground{
position:relative; z-index:8; border:1px solid #3C7FB1;
background-color:lime;
}
.actionButtonBackground:before{
content:""; display:block; position:absolute;
top:0px; left:0px; right:0px;
bottom:0px; border:1px solid #24CFFC;
}
.clb {clear:both;}
.dib {
display:inline-block; padding:0.88em; background-color:cyan;
}
.flr {float:right;}
</style>
</head>
<body>
<h1>Float All Buttons Right</h1>
<div class="dib flr">
<div class="actionButtonBackground">
<label>Submit</label>
</div>
<div class="actionButtonBackground">
<label>Clear</label>
</div>
<div class="actionButtonBackground">
<label>OK</label>
</div>
<div class="clb">
</div>
</div>
</body>
</html>
put this two line code in your css with your css :-
.actionButtonBackground{
display:inline-block;
margin:0 10px;
}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.