时间戳

首页 > 解决方案 > 为什么我的搜索按钮在我的搜索栏下方

html - 为什么我的搜索按钮在我的搜索栏下方

问题描述

我正在为我的一个想法制作一个搜索栏，但我对 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 位于框的右上角而不是右下角

截屏

标签： htmlcss

解决方案

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

我看到的另一个问题是关于设置input宽度的规则，因为这会影响子元素——告诉它填充 50% 的.location而不是.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>

推荐阅读