使用CSS定位<input>
使用CSS定位<input>
提问于 2018-06-09 05:03:02
我在页面上定位元素，其中一个元素不会移动(输入图像“type=”)。我想知道为什么它不移动，而所有其他元素都在移动。下面是我的代码：
.search {
position: relative;
display: inline;
}
.search-bar {
width: 45%;
height: 50px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 27.5%;
padding: 5px 5px;
z-index: -2;
}
#search-button {
width: ;
height: ;
border: 5px solid rgb(255, 84, 132);
border-radius: 100px 45px 100px 45px;
postition: absolute;
top: 500px;
left: 50%;
z-index: -1;
}
.logo {
position: absolute;
top: 29.9%;
left: 36.25%;
width: 27.5%;
display: inline;
}<body>
<!--change image to logo and alt to name-->
<img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>
<!--search bar-->
<!--fill in action and check if target is correct-->
<form action="hey" target="_self" method="get">
<input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
<input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">
</form>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-09 05:37:11
position拼写错误为postition。还包括空的宽度和高度规则的值。
.search {
position: relative;
display: inline;
}
.search-bar {
width: 45%;
height: 50px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 27.5%;
padding: 5px 5px;
z-index: -2;
}
#search-button {
width: 20px;
height: 20px;
border: 5px solid rgb(255, 84, 132);
border-radius: 5px;
position: absolute;
top: 500px;
left: 50%;
z-index: -1;
}
.logo {
position: absolute;
top: 29.9%;
left: 36.25%;
width: 27.5%;
display: inline;
}<body>
<!--change image to logo and alt to name-->
<img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>
<!--search bar-->
<!--fill in action and check if target is correct-->
<form action="hey" target="_self" method="get">
<input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
<input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">
</form>
</body>
Stack Overflow用户
发布于 2018-06-09 05:10:40
#search-button{
width:;
height:;
}您缺少一个高度和宽度，这使得它们无效，并且没有应用任何其他规则(如位置或顶部)。请删除这些值或输入可接受的值以解决此问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50768371
复制相关文章
相似问题