how to make border fit exactly to another border-CodePudding

This is my website but as you can see, the borders from the input and the submit button do not fit exactly to each other, and I can't stand that! so can somebody help me? here is my code:

<!DOCTYPE html>
<html lang="nl">
<head>
    <link rel="stylesheet" type="text/css" href="https://webtinq.nl/denory/css/style.css">
    <title>Denory Search Engine</title>
</head>
<style>
    .search {
        margin: 0 auto;
        text-align: center;
    }
    
    .search h4 {
        margin: 70px  0px 20px 0px;
        font-size: 50px;
    }
    
    .search input[type=text]{
        width: 40%;
        
        outline: none;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 30px 0px 0px 30px;
        border: 1px solid black;

        width: 700px;
        border-right: none;
        
    }
    

    
    .search img{
        height: 30px;
        width: 30px;
    }
    
    .search button {
        background: white;
        border-radius: 0px 30px 30px 0px;
        height: 56px;
        outline: none;
        border-left: none;
    }
    
    #mode {
        border: none;
        background: #f0faf7;
        outline: none;
    }
    
    #go {
        outline: none;
        border: 1px solid black;
        border-left: none;

    }
</style>
<link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
 integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
 crossorigin="anonymous">
<body>
<nav >
<a  href="https://webtinq.nl/denory/index.html">Denory</a>
<button  type="button" data-toggle="collapse" data- 
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>

<div  id="navbarSupportedContent">
<ul >
  <li >
    <a  href="https://webtinq.nl/denory/index.html">Home <span 
  >(current)</span></a>
  </li>
  <li >
    <a  href="https://webtinq.nl/denory/about.html">About me</a>
  </li>
  <select id="mode">
      <option value="Light mode">Light mode</option>
      <option value="Dark mode">Dark mode</option>
  </select>
  </ul>

  </div>
  </nav>
   <!--search-->
  <center>
  <div >
   <h4>Denory</h4>
    <input type="text" id="search" placeholder="Search the web"><button id="go" 
 onClick="go()"><img src="https://webtinq.nl/denory/afbeeldingen/magnifying 
 glasso.png"></button>

</center>
</div>
<script>
var input = document.getElementById("search");

 // Execute a function when the user presses a key on the keyboard
 input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
 if (event.key === "Enter") {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
 go();
 }
 });
 function go(){
window.location.href = "https://google.com/search?q="   input.value;
 }
 setInterval(function(){if(document.getElementById("mode").value == "Light mode") 
{document.querySelector("body").style.background = "white"; 
document.querySelector("body").style.color = 
"black";}else{document.querySelector("body").style.background = "black"; 
  document.querySelector("body").style.color = "white";}}, 100);
  </script>
</body>
</html>

can somebody help me? i think most people can't stand that.

padding doesn't work (if possible, i want to do it all in a style tag)

CodePudding user response：

Add vertical-align: middle; css for your input box. It will align the button and input.

CodePudding user response：

rather than having a separate border and component for the #go element I would have the #search element have a border radius on both sides, then place the #go element (magnifying glass) on top of the #search element, you can do this with z-index and position: absolute; , however you may need to create a wrapping container like this

<div >
  <h4>Denory</h4>

  <div >
    <input type="text" id="search" placeholder="Search the web" />

    <button id="go" onclick="go()">
      <img src="https://webtinq.nl/denory/afbeeldingen/magnifying glasso.png" />
    </button>
  </div>
</div>

and the css

.search input[type="text"] {
  outline: none;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 30px;
  border: 1px solid black;
  width: 100%;
}

.search button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}

.searchContainer {
  width: 700px;
  height: fit-content;
}

Good luck! (P.S I recommend getting an auto formatter to help organize code)