Question

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

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

Answer 2

您只需在CSS

中添加此代码即可

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

事实上，更多更改请参见updates jsfiddle

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

定位div顶部，左侧，右侧

3 个答案: