2
私はこれをやっていません。私はちょうど今、馬鹿だと思っています。私の虫眼鏡画像が入力テキストと正しく整列していない理由を知らないでください。HTML入力タイプが「画像」の場合、数ピクセルを超える場合。問題の整列
任意の提案を誰もがいくつかの助けが必要
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