大佬教程收集整理的这篇文章主要介绍了更改 html 按钮的高度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试使按钮适合其父级的高度，但我不知道该怎么做。 我试图弄清楚 YouTube 导航栏搜索中的按钮是如何工作的，但即使删除了按钮的所有样式，它仍然是 100% 的父高度。
这是我的代码：
* {
padding: 0;
margin: 0;
}
.navbar {
BACkground: grey;
wIDth: 100%;
height: 50px;
max-height: 50px;
min-height: 50px;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
.nav-items {
display: flex;
align-items: center;
}
.nav-item {
display: flex;
align-items: center;
}
#nav-search {
display: flex;
align-items: center;
BACkground:black;
}
#search-button {
}
#search-input {
height: 100%;
}<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/CSS" href="./style.CSS">
<title></title>
</head>
<body>
<nav class="navbar" >
<ul class="nav-items">
<li class="nav-item">
<span ID="nav-search">
<input ID="search-input"></input>
<button ID="search-button">asdf</button>
</span>
</li>
</ul>
</nav>
</body>
</HTML>
任何帮助将不胜感激。
只需为输入元素添加填充。
/* For Dark Color scheR_813_11845@e */
html {
color-scheR_813_11845@e: dark;
scrollbar-color: #686868 #424242;
}
body {
BACkground: #272B3A;
color: #FFF;
font-family: Arial,sans-serif;
/*display: flex;*/
/*justify-content: center;*/
}
/* * {
font-size: 1rem;
} */
.container {
margin: auto;
}
form {
text-align: center;
width: 300px;
height: 150px;
border: 2px solid #44E5FE;
}
input {
/* appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none; */
border: none;
outline: none;
}
input[type=submit] {
padding: 0.7rem 1.3rem;
border: 0;
}
input[type=text] {
BACkground: #272B3A;
color: #FFF;
border: 2px solid #414454;
height: 32px;
}
.nav {
margin-top: 50px;
}
input.submit {
BACkground: #FF5873;
color: white;
}
button {
BACkground: #FF5873;
color: white;
padding: 10px 20px;
border: none;
outline: none;
}
/* My Additions Code Ends */
* {
padding: 0;
margin: 0;
}
.navbar {
/* BACkground: grey; */
width: 100%;
height: 50px;
max-height: 50px;
min-height: 50px;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
.nav-items {
display: flex;
align-items: center;
}
.nav-item {
display: flex;
align-items: center;
}
#nav-search {
display: flex;
align-items: center;
/* BACkground:black; */
}
#search-button {
padding: 10px;
}
#search-input {
padding: 10px;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<nav class="navbar" >
<ul class="nav-items">
<li class="nav-item">
<span id="nav-search">
<input id="search-input"></input>
<button id="search-button">button</button>
</span>
</li>
</ul>
</nav>
<p>Read the comment in the HTML code</p>
<!-- Just remember to add padding to your input elements. And <button> & <input type="button"> are the same thing -->
</body>
</html>,
您可以向按钮添加 height
* {
padding: 0;
margin: 0;
}
button {
height: 50px;
}
.navbar {
BACkground: grey;
width: 100%;
height: 50px;
max-height: 50px;
min-height: 50px;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
.nav-items {
display: flex;
align-items: center;
}
.nav-item {
display: flex;
align-items: center;
}
#nav-search {
display: flex;
align-items: center;
BACkground: black;
}
#search-button {}
#search-input {
height: 100%;
}<nav class="navbar">
<ul class="nav-items">
<li class="nav-item">
<span id="nav-search">
<input id="search-input" />
<button id="search-button">asdf</button>
</span>
</li>
</ul>
</nav>,
您可以将类传递给您的按钮
CSS：
* {
padding: 0;
margin: 0;
}
.navbar {
BACkground: grey;
width: 100%;
height: 50px;
max-height: 50px;
min-height: 50px;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
.nav-items {
display: flex;
align-items: center;
}
.nav-item {
display: flex;
align-items: center;
}
#nav-search {
display: flex;
align-items: center;
BACkground:black;
}
.search-button {
width: 100%;
height: 100%;
BACkground-color: red;
}
#search-input {
height: 100%;
}
HTML：
<nav class="navbar" >
<ul class="nav-items">
<li class="nav-item">
<span id="nav-search">
<input id="search-input"></input>
<button id="search-button" class="search-button">asdf</button>
</span>
</li>
</ul>
</nav>
根据您的问题，您试图通过将 navbar 放入 height: 100% 来使按钮成为 search-button 的高度，但 search-button 的父项是 {{1 }} 并且它的父元素是 nav-search 等等，因此每个元素的高度应该被指定为 100% 的高度或者为 nav-items
以上是大佬教程为你收集整理的更改 html 按钮的高度全部内容，希望文章能够帮你解决更改 html 按钮的高度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。