如何在两个div和按钮之间显示
How to display two div and button between
我正在尝试显示两个 div,一个在左边(输入),一个在右边(右边),它们之间有一个按钮(这是一个 asp.net 网络项目),但即使如果我尝试 float:left 和 right or margin left: %, I couldn't do it.Here 是我的 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;
}
见下文...
.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>
我正在尝试显示两个 div,一个在左边(输入),一个在右边(右边),它们之间有一个按钮(这是一个 asp.net 网络项目),但即使如果我尝试 float:left 和 right or margin left: %, I couldn't do it.Here 是我的 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;
}
见下文...
.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>