Html 上、左、右定位div

我想制作一个div，如下图所示：

我不知道我的错误在哪里：

我的css：

.div-newsletter-top {
    margin: 0px auto;
    width: 60%;
}

.button_register_nslwtr {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF none repeat scroll 0% 0%;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

div.cs-skin-elastic {
    background: transparent none repeat scroll 0% 0%;
    font-size: 0.9em;
    font-weight: 100;
    color: #B9B9B9;
    float: left;
    width: 25%;
    border: 1px solid #DDD;
    height: 20%;
    border-radius: 0px 20px 20px 0px;
}

我的html：

    <div class="div-newsletter-top">
        <div style="width:50%;">
            <input style="width:60%;margin: 0 auto; "  type="text" class="form-control" />
        </div>

        <div style="width:34px;height:34px;float:right;">
            <button class="button_register_nslwtr">
                reg
            </button>
        </div>

        <div  style="width:60px">
            <select class="cs-select cs-skin-elastic">
                <option value="" disabled selected>choose city</option>
                <option value="" data-class="flag-france">tehran</option>

            </select>
        </div>




    </div>

规则
选择城市
德黑兰

您只需在CSS中添加此代码即可

    .div-newsletter-top > div{
       position: relative;
       float: left;
    }

---

事实上，还有一些更改请参见问题在于

div

元素是块元素。您可以将它们更改为

span

元素以获得所需的结果。看

规则
选择城市
德黑兰

尝试添加此

.div时事通讯顶部{
保证金：0；
宽度：100%；
位置：相对位置；
高度：100px；
显示器：flex；
flex-flow：行nowrap；
对齐项目：居中；
证明内容：之间的空间；
}
.按钮\u寄存器\u nslwtr{
宽度：40px；
高度：40px；
边界半径：20px；
边框：1px实心#D9D9D9；
背景：#FFF无重复滚动0%0%；
光标：指针；
过渡：所有0.2秒到0秒；
}
.cs皮肤弹性{
背景：透明无重复滚动0%0%；
字号：0.9em；
字号：100；
颜色：#B9B9B9；
宽度：25%；
边框：1px实心#DDD；
身高：20%；
边界半径：0px 20px 20px 0px；
}

选择城市
德黑兰
规则

 <span style="width:50%;">
    <input style="width:60%;margin: 0 auto; "  type="text" class="form-control" />
 </span>

 <div style="width:34px;height:34px;float:right;">
     <button class="button_register_nslwtr">
         reg
    </button>
 </div>

 <span  style="width:60px">
     <select class="cs-select cs-skin-elastic">
         <option value="" disabled selected>choose city</option>
         <option value="" data-class="flag-france">tehran</option>

     </select>
 </span>