如何在两者之间显示两个div和按钮

时间:2015-12-24 17:48:44

标签: css asp.net button alignment divide

我试图显示两个div,一个在左边(输入)一个在右边(右边)和一个按钮(它是一个asp.net web项目)但是即使我尝试浮动:左右或剩余边距:%,我无法做到。这是我的css文件;

.input{
    background-color:rgba(23, 23, 23, 0.71);

    border: 2px solid grey;
    width: 450px;
    height: 550px;   
    float: left;
    margin-left:0px;    
    border-radius: 25px;

    padding: 10px; 


    }
.roundcorner //this class is for button
{
border:2px solid #a1a1a1;
text-align: center; 

font-size:18px;
margin-left:45%;
margin-top:35px;
font-style:oblique;
background:#a1a1a1;
width:70px;
border-radius:25px;
-moz-border-radius:35px; /* Firefox 3.6 and earlier */
}

 .output{
    background-color:rgba(23, 23, 23, 0.71);
    border: 2px solid grey;
    width: 270px;
    height: 550px;   
    margin-left: 65%;
    margin-right:15px;
    border-radius: 25px;
        padding: 10px; 


    }

1 个答案:

答案 0 :(得分:1)

见下文......

.container{
  width:100%;
  font-family:arial;
  }

.box{
  padding-top:60px;
  width:33%;
  height:100px;
  text-align:center;
  display:inline-block;
  zoom:1;
  *display:inline;
  }

.box.left{
  float:left;
  background-color:#ddd;
  }
.box.right{
  float:right;
  background-color:#ddd;
  }
<div class="container">
  <div class="box left">Left div</div>
  <div class="box">
    <button>I'm a button</button>
  </div>
  <div class="box right">Right div</div>
</div>