我讨厌这样做。不要以为这是太多的代码...我现在只是哑巴。不知道为什么我的放大镜图像与输入文本不正确。
任何建议，任何人都需要帮助
.HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<div id="pagetop">
<ul id="title">
<li id="logo"><img src="images/creativebug.png" alt=""></li>
<li>Classes</li>
<li>Inspiration</li>
<li>Instructor</li>
<li>Calander</li>
<li>Free</li>
<li><span id="CBTV">CBTV</span></li>
</ul>
<ul id='buttons'>
<li><button id="trial">Start Free Trial</button></li>
<li><button id="login">Log in</button></li>
</ul>
</div>
<div class="search-area">
<select>
<option>CLASSES</option>
</select
><input id="textsearch" type="text" placeholder="Search"
><input id="mag" type="image" src="images/mag.png">
</div>
</div>
<hr id="line">
<div class="content">
</div>
</div>
<script src="js/app.min.js"></script>
</body>
</html>
CSS - （使用 SASS - 认为它更干净...
@import url(https://fonts.googleapis.com/css?family=Oswald)
// Font Variables
$Oswald: Oswald, serif
// Styles
body
font-family: $Oswald
font-size: 40px
margin: 0px
.header
margin: 0 150px
.content
height: 1000px
padding-top: 200px
#pagetop
top: 0px
width: 100%
background: white
color: #000
font-size: 18px
padding-top: 0px
overflow: hidden
#pagetop
ul
li
list-style: none
text-transform: uppercase
float: left
#pagetop
#title
li
margin-right: 22px
margin-top: 6px
#pagetop
#title
#logo
margin-top: 0px
#pagetop
li
#CBTV
color: #FF4B55
//search area
.header
.search-area
select
height: 32px
border: 1px solid #eee
outline: none
background-color: #B9B9B9
border-radius: 0px
appearance: none
padding-left: 10px
padding-right: 10px
border-top-left-radius: 5px
border-bottom-left-radius: 5px
border-right: none
display: inline-block
.header
.search-area
#mag
border-top-right-radius: 5px
border-bottom-right-radius: 5px
.header
.search-area
#textsearch
border-right: none
width: 360px
padding-left: 8px
.header
.search-area
input
height: 30px
padding: 0px
border: 1px solid #eee
outline: none
display: inline-block
.header
.search-area
text-align: center
hr
border: 1px solid #eeeeee
// right side buttons
#pagetop
#buttons
float: right
padding: 0px
margin: 0 0
margin-right: 40px
margin-top: 4px
#pagetop
#buttons
li
margin-right: 4px
#trial
color: #fff
padding: 8px 16px
text-align: center
text-decoration: none
display: inline-block
border: none
border-radius: 7px
text-transform: uppercase
background-color: #FF4B55
#login
color: #fff
padding: 8px 16px
text-align: center
text-decoration: none
display: inline-block
border: none
border-radius: 7px
text-transform: uppercase
background-color: #666666
您是否尝试过调整类的上边距 #mag 这可能是您的解决方案。拍摄链接，我很乐意为您提供进一步的帮助。