.nav {
height: 60px;
background-color: rgba(128, 128, 128, 0.24);
background-size: cover;
display: inline-block;
position: fixed;
top: 0;
left: 0;
width: 100%;
float: left;
clear: right;
font-family: 'Roboto', sans-serif;
}
.home{
text;
text-decoration: none;
position: absolute;
left: 20px;
top: 15px;
font-size: 1.5em;
color:black;
}
.navList {
display: inline-block;
position: absolute;
right: 30px;
}
.navLi {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.navLi a {
text-decoration:none;
font-size: 1.5em;
}
.searchBox {
margin-top: 90px;
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100px;
}
.searchSubmit {
background: url("magnifying-glass.png");
height: 30px;
width: 30px;
background-size: 100%;
}<body>
<div class="wrapper">
<!-- ========= START OF NAVBAR ======= -->
<div class="nav">
<a href="" class="home">Greg's List</a>
<ul class="navList" title="navigation">
<li class="navLi"><a href="">Post</a></li>
<li class="navLi"><a href="">Account</a></li>
</ul>
</div>
<!-- ========= END OF NAVBAR ======= -->
<!-- ========= Search Box Start======= -->
<div class="searchBox">
<label>Search Jobs</label>
<div class="searchInputBox">
<form>
<input class="searchInput" type="search" placeholder="Search Software Jobs">
<button class="searchSubmit" type="submit"></button>
</form>
</div>
</div>
<!-- ========= Search Box End======= -->
</div>
</body>There are several questions that are the exact same. This is one.
我有一张 30 x 30 像素的图像。我使用这张图片作为提交按钮的背景。我需要增加输入元素的高度，使其与提交按钮的高度相同，即 30 像素。
出于某种原因，我无法使用 height 属性增加输入元素的高度。我正在使用内联 block ，所以不可能。
最佳答案
请尝试此代码。您可以更改按钮的“高度”属性。
CSS
.nav {
height: 60px;
background-color: rgba(128, 128, 128, 0.24);
background-size: cover;
display: inline-block;
position: fixed;
top: 0;
left: 0;
width: 100%;
float: left;
clear: right;
font-family: 'Roboto', sans-serif;
}
.home{
text;
text-decoration: none;
position: absolute;
left: 20px;
top: 15px;
font-size: 1.5em;
color:black;
}
.navList {
display: inline-block;
position: absolute;
right: 30px;
}
.navLi {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.navLi a {
text-decoration:none;
font-size: 1.5em;
}
.searchBox {
margin-top: 90px;
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100px;
}
.searchSubmit {
background: url("magnifying-glass.png");
height: 20px;
width: 30px;
background-size: 100%;
}
HTML
<body>
<div class="wrapper">
<!-- ========= START OF NAVBAR ======= -->
<div class="nav">
<a href="" class="home">Greg's List</a>
<ul class="navList" title="navigation">
<li class="navLi"><a href="">Post</a></li>
<li class="navLi"><a href="">Account</a></li>
</ul>
</div>
<!-- ========= END OF NAVBAR ======= -->
<!-- ========= Search Box Start======= -->
<div class="searchBox">
<label>Search Jobs</label>
<div class="searchInputBox">
<form>
<input class="searchInput" type="search"
placeholder="Search Software Jobs">
<button class="searchSubmit" type="submit"></button>
</form>
</div>
</div>
<!-- ========= Search Box End======= -->
</div>
</body>
关于html - 尽管查看了几个类似的问题，但我仍然无法设置输入元素的样式并提交相同的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46762788/