问题描述
此CSS仅适用于大屏幕,对于小屏幕,它不成方形。
下面的代码来自导航栏,添加了放大镜图标和圆形边框。但是当将尺寸调整为小屏幕时,放大镜不适合屏幕,如何纠正我的错误?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {Box-sizing: border-Box;}
body {
margin: 0;
font-family: Arial,Helvetica,sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav .search-container input[type=text] {
position: relative;
height:50px;
border: 1px solid #d0d0d0;
border-radius: 100px;
margin: 2px 0 0 0px;
padding: 0px 0px 0 50px;
outline: 0; /*not outline field*/
Box-shadow: 0 0 0 0 rgba(136,136,0);
font-size: 18px;
transition: Box-shadow .3s;
width: 300px;
}
.topnav .search-container .search-icon {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
font-size: 20px;
color: #777777;
margin:0 0 0 0px;
padding: 12px 0px 0px 20px;
z-index: 2;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #eee;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.PHP">
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
<input type="text" placeholder="Search.." name="search">
<button type="submit">Go</button>
</form>
</div>
</div>
<br><br><br>
<div style="padding-left:16px">
<h2>Responsive Search Bar</h2>
<p>Navigation bar with a search Box and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>
</body>
</html>
解决方法
尝试将position: relative
添加到.seach-container
。图标现在将保留在搜索框中。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial,Helvetica,sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
position: relative; /* Add this */
float: right;
}
.topnav .search-container input[type=text] {
position: relative;
height:50px;
border: 1px solid #d0d0d0;
border-radius: 100px;
margin: 2px 0 0 0px;
padding: 0px 0px 0 50px;
outline: 0; /*not outline field*/
box-shadow: 0 0 0 0 rgba(136,136,0);
font-size: 18px;
transition: box-shadow .3s;
width: 300px;
}
.topnav .search-container .search-icon {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
font-size: 20px;
color: #777777;
margin:0 0 0 0px;
padding: 12px 0px 0px 20px;
z-index: 2;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #eee;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
<input type="text" placeholder="Search.." name="search">
<button type="submit">Go</button>
</form>
</div>
</div>
<br><br><br>
<div style="padding-left:16px">
<h2>Responsive Search Bar</h2>
<p>Navigation bar with a search box and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>
</body>
</html>
,
您需要将输入标记和按钮放入为i创建的div中(真棒字体图标)
更改i(字体超赞图标)的样式
(最好将“提交”按钮放入表单中, 或者您可以使用form属性将其链接到您的表单)
像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial,sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav .search-container input[type=text] {
position: relative;
height:50px;
border: 1px solid #d0d0d0;
border-radius: 100px;
margin: 2px 0 0 0px;
padding: 0px 0px 0 50px;
outline: 0; /*not outline field*/
box-shadow: 0 0 0 0 rgba(136,0);
font-size: 18px;
transition: box-shadow .3s;
width: 300px;
}
.topnav .search-container .search-icon i {
position: absolute;
margin-top: 15px;
margin-left:15px;
font-size: 20px;
color: #777777;
z-index: 2;
}
.topnav .search-container .search-icon button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #eee;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container .search-icon button:hover {
background: #ccc;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<div class="search-icon">
<i class="fa fa-search"></i>
<input type="text" placeholder="Search.." name="search">
<button type="submit">Go</button>
</div>
</form>
</div>
</div>
<br><br><br>
<div style="padding-left:16px">
<h2>Responsive Search Bar</h2>
<p>Navigation bar with a search box and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>
</body>
</html>