A button gets out of the div-CodePudding

I have the following navbar -

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
}

#Name {
  padding: 0px !important;
  top: 0px;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  vertical-align: middle;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
}

<div id="navbar">
  <button  onclick="openNav()">&#9776;</button>
  <input  type="button" value="Test" id="Name">
</div>

In it, the second button with the value "test" just overflows out of the div for no reason at all. I tried some things but they did not work. How to fix it? Thanks in advance.

CodePudding user response：

Use display flex

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
  display: flex;
  align-items: center;
}

#Name {
  padding: 0px !important;
  top: 0px;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
  margin: 0;
}

<div id="navbar">
  <button  onclick="openNav()">&#9776;</button>
  <input  type="button" value="Test" id="Name">
</div>

CodePudding user response：

Just add float: left to each button.

#navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  z-index: 1 !important;
  top: 0px;
  background-color: #20b7c2;
}

#Name {
  padding: 0px !important;
  top: 0px;
  float: left;
}

.openbtn {
  background-color: #20b7c2;
  height: 50px;
  cursor: pointer;
  margin-right: 0px;
  border: 1px white solid;
  border-radius: 0px;
  width: 50px !important;
  padding: 0px;
  font-size: 25px;
  float: left;
}

.navbarButtons1 {
  background-color: #20b7c2;
  color: white;
  border: 0px;
  cursor: Default;
  vertical-align: middle;
  height: 50px;
  top: 0;
  width: 100px;
  position: relative;
  font-size: 15px;
}

<div id="navbar">
  <button  onclick="openNav()">&#9776;</button>
  <input  type="button" value="Test" id="Name">
</div>

CodePudding user response：

Remove vertical-align: middle; and use display: flex; on your parent #navbar element instead .

Using vertical-align: top; is not the best solution.
Also, make sure to use the right height values, or rather don't set heights at all.

Example:

const toggleMenu = () => {
  console.log("toggle menu!");
};

document.querySelectorAll(".openbtn").forEach(el => {
  el.addEventListener("click", toggleMenu);
});

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

:root {
  --color-primary: #20b7c2;
}

#navbar {
  width: 100%;
  position: fixed;
  top: 0px;
  height: 50px;
  z-index: 1; /*!important should never be used.Just as a last resort.Study CSS specificity instead*/
  background-color: var(--color-primary);
  display: flex;
}

button {
  background-color: var(--color-primary);
  color: #fff;
  border: 0;
  padding: 0 1rem;
  cursor: pointer;
}

.openbtn {
  border-right: 1px white solid;
}

<div id="navbar">
  <button type="button" >&#9776; <!-- STOP using inline onclick handlers. --></button>
  <button type="button">Test</button>
</div>