Button and Input Keep Overlapping Each Other
Question
Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page .
This is the HTML code:
<!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>
Here is the CSS code:
#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;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
2 answers
solution1
1 ACCPTED 2023-01-04 01:01:33
it's because you have set the width of the #browsebutton and #searchbar. Please unset it and it will work.
solution2
0 2023-01-04 01:08:47
* { 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.