为什么搜索栏下方的搜索按钮

Question

我正在为我的想法创建搜索栏，但我对CSS还是很陌生。 我的搜索按钮位于文本栏下方，而我的悬停按钮位于下方，我无法找出解决方案或找到原因！

我尝试更改页边距，填充和上/下百分比，但无济于事

HTML

        <div class="search-box">
            <div class="location">
                <input name="location" type="text" 
                                       placeholder="location"/>
            </div>
            <div class="dropdwn">
                <button class="dropbtn">dropdown</button>
                <div class="dropdwn-content">
                    <img src="../Media/sunny.png" alt="Sunny"                                                          
                                                  width="50" height="50">
                    <img src="../Media/partly_cloudy.png" 
                     alt="partly_cloudy" width="50"height="50">
                <img src="../Media/rain_s_cloudy.png" alt="rain_s_cloudy" 
                                                   width="50"height="50"> 
                </div>
            </div>
            <div class="searchbtn">
                <button type="button">Search</button>
            </div>

        </div>

CSS

.search-box
{
    width: 40%;
    box-sizing: border-box;
    border-radius: 3px;
    border-style: solid;
    position: absolute;
    left: 35%;
    top: 20%;
}
.location input
{
    box-sizing: inherit;
    width: 50%;
    float:left;
}

.dropdwn
{
    position: relative;
    display: inline-block;
}
.searchbtn button
{
    float: right;

}
.dropdwn-content
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

我希望我的searchbtn位于框的右上方，而不是右下方

Answer 1

使用display: inline-block时，空格很重要。这可能会使基于%的布局和缩进变得混乱（请参阅下文）。

我看到的另一个问题是您关于设置input宽度的规则，因为这会影响子元素-告诉它填充.location的50％，而不是.search-box

我已经简化了您的代码以突出显示这些更改，并添加了一些％，以便输入和按钮将拉伸（或收缩）以填充其父级，而后者又将填充.search-box。 float: right元素上的简单.searchbtn现在将其发送到右侧，而没有新行。

* {
  box-sizing: border-box;
}

.search-box
{
    box-sizing: border-box;
    border-radius: 3px;
    border-style: solid;
    left: 35%;
    top: 20%;
    width: 60%;
}

.search-box > div {
  display: inline-block;
}
.search-box button, input {
  width: 100%;
}

.location {
  width: 50%;
}


.searchbtn {
  float: right;
}

<div class="search-box">

  <div class="location">
  <input name="location" type="text" placeholder="location"/>
  </div><div class="dropdwn">
  <button class="dropbtn">dropdown</button>
  </div><div class="searchbtn">
  <button type="button">Search</button>
  </div>
</div>