如何防止按钮在 html 和 css 中按下搜索栏？

Question

我正在创建一个标题。它的左侧有一个标志，右侧有一个搜索栏和相应的搜索按钮。我已经添加了徽标和搜索栏。然后我添加了按钮。当我这样做时，它使我的搜索栏稍微向下移动并超出了标题的范围。它还使按钮稍微超出视口。现在看起来像这样：

我已经尝试了一些方法，但是当您不知道是什么原理导致问题存在时，很难知道该尝试什么。我是编码新手。这是我的 html：

    <body>
      <header>
        <div class="container">
          <div class="logo">
            <img src="/Images/logo v2.png" alt="Solo Scriptura Logo"/>
          </div>
          <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
              <button class="find">
                <img src="/Images/Vector/icons/search-svgrepo-com.svg" />
              </button>
            </form>
          </div>
        </div>
      </header>
      <main></main>
    </body>

这是我的CSS：

body {
    max-width: 5000px;
    min-width: 500px;
}
header {
    display:flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
     
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#search-bar {
    background-color: rgb(78,78,78);
    color: rgb(0,0,0);
    outline: none;
    height: 58px;
    width: 200px;
    font-size: 18px;
    border-left: 2px solid rgb(86,86,86);
    border-right: none;
    border-top: none;
    border-bottom: none;
    cursor: auto;
}
button {
    border: none;
    background-color: rgb(78,78,78);
}
button > img{
    height: 58px;
    width: 55px;
    overflow: hidden;
}

谢谢您的帮助。

Answer 1

您可以通过将

vertical-align: top

添加到搜索栏和按钮来解决此问题，如下所示：

#search-bar {
     vertical-align: top;
     ...etc.
}
button > img {
     vertical-align: top;
     ...etc.
}

Codepen 这里

如何防止按钮在 html 和 css 中按下搜索栏？

问题描述投票：0回答：1

1个回答

最新问题

如何防止按钮在 html 和 css 中按下搜索栏？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1