定位 div 上、左、右答案

【问题标题】：Positioning divs top, left, right定位 div 上、左、右
【发布时间】：2016-02-01 06:05:20
【问题描述】：

我想制作一个如下图所示的 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>

【问题讨论】：

标签： html css

【解决方案1】：

问题在于div 元素是块元素。您可以将它们更改为span 元素以获得您想要的结果。见fiddle。

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

【讨论】：

【解决方案2】：

您只需在 CSS 中添加此代码

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

其实还有一些变化见updates jsfiddle

【讨论】：

【解决方案3】：

尝试添加这个

.div-newsletter-top {
  margin: 0;
  width: 100%;
  position: relative;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
.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;
}
.cs-skin-elastic {
  background: transparent none repeat scroll 0% 0%;
  font-size: 0.9em;
  font-weight: 100;
  color: #B9B9B9;
  width: 25%;
  border: 1px solid #DDD;
  height: 20%;
  border-radius: 0px 20px 20px 0px;
}

<div class="div-newsletter-top">
  <input style="" type="text" class="form-control" />
  <select class="cs-select cs-skin-elastic">
    <option value="" disabled selected>choose city</option>
    <option value="" data-class="flag-france">tehran</option>
  </select>
  <button class="button_register_nslwtr">
    reg
  </button>
</div>

【讨论】：