gpt4 book ai didi

html - 尽管查看了几个类似的问题,但我仍然无法设置输入元素的样式并提交相同的表单

转载 作者:太空宇宙 更新时间:2023-11-04 01:32:43 25 4
gpt4 key购买 nike

.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 ,所以不可能。

Desired Output

最佳答案

请尝试此代码。您可以更改按钮的“高度”属性。

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com