Question

我讨厌这样做。不要认为这是很多代码......我现在只是愚蠢的发现。不知道为什么我的放大镜图像与我的输入文字没有正确对齐。

任何人都需要帮助的建议

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

Answer 1

您是否尝试调整类#mag的上边距，这可能是您的解决方案。拍摄链接，我很乐意进一步协助。

HTML输入类型“图像”，如果高于几个像素。麻烦对齐

1 个答案: