html 按钮和输入保持相互重叠

ubby3x7f 于 2023-01-07 发布在其他

关注(0)|答案(2)|浏览(216)

好的，我正在尝试编写一个出现在网页顶部的栏。在这个栏上，我希望有一个标题，一个按钮，和一个输入/搜索栏。我的问题是，输入总是与顶部栏中的按钮重叠。请注意，顶部的栏是一个div。下面是出现bug的页面的链接：Link to the page.
这是HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Langmesh</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div id="topbardiv">
      <h1 id="titletext">Langmesh</h1>
      <button onclick="browse()" id="browsebutton">Browse</button>
      <input type="text" id="searchbar" value="Search">
    </div>
  </body>
</html>

下面是CSS代码：

#titletext {
  font-size: 50px;
  font-family: "Brush Script MT", sans-serif;
}

#topbardiv {
  background-color: darkorange;
  text-align: center;
  border: 10px solid lightgray;
}

#topbardiv h1,
#topbardiv button {
  margin: 0px;
  display: inline-block;
  padding: 1em;
  color: white;
  -webkit-text-stroke: 1.5px #000000;
}

#browsebutton,
#searchbar {
  height: 150px;
  width: 100px;
  font-size: 30px;
  font-family: "Brush Script MT", sans-serif;
  background-color: darkorange;
  border: 0;
}

我还没有添加任何Javascript。
如果这是一个愚蠢的问题，答案很简单，而我只是愚蠢，你可以随意批评我。
我试着在同一个div中使用文本、按钮和输入，并使用css将它们放在一起，我希望它看起来像顶部的一个标题栏、浏览按钮和搜索栏，但结果搜索栏和浏览按钮重叠了。
我正在使用Windows 10操作系统和replit来编程页面和Chrome网络浏览器。

Html

来源：https://stackoverflow.com/questions/74999984/button-and-input-keep-overlapping-each-other

2条答案

按热度按时间

wgmfuz8q1#

这是因为您已经设置了#browsebutton和#searchbar的宽度。请取消设置，它将正常工作。

赞(0）回复(0）举报 2023-01-07

dojqjjoe2#

* {
  margin: 0;
  font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
  box-shadow: 0px 0px 2px;
  height: 33px;
}
.container button {
border: none;
  box-shadow: 0px 0px 2px;
  height: 33px;
}
.container h1 {

}
.background_css {
  width: 100%;
  background: orange;
  padding-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Langmesh</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div class="container">
      <div class="background_css">
    <h1 id="titletext">Langmesh</h1>
 
<form method="POST" action="page.html" class="search_css">
  <input type="search" placeholder="Search..."><button type="submit">Search</button>
    </form>
    </div>
  </div>
  </body>
</html>

赞(0）回复(0）举报 2023-01-07

我来回答

html 按钮和输入保持相互重叠

2条答案

相关问题

热门标签

最新问答