Petite problème avec un button collé a un input

graphiweb
Les bases HTML/CSS

Bonjour,

Voilà, je suis actuellement en train de m'exercer à l'intégration d'une maquette web au format PSD que j'ai trouvé sur le web. Tout ce passe bien hormis un petit détails. je vous fait une capture d'écran pour que vous puissiez voir le problème en question. Il y a un petit décalage entre l'input et le button.

https://zupimages.net/up/19/23/1azq.png

Ce que je fais

J'ai essayé de modifier la hauteur du input, mais cela n'a rien changé. J'ai essayé de modifier la taille de la police, mais ça fonctionne pas. Alors, ce n'est pas dramatique, mais j'aimerais que ça doit clean vous voyez ce que je veux dire.

Mon code html

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <title>Nava</title>
    <meta charset="utf-8">
    <meta name="description" content="Nava">
    <meta name="author" content="Nava">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script type="text/javascript" src="js/app.js"></script>
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrap">
      <nav class="navbar full" id="navbar">
        <div class="container">
          <a href="" class="logo left"><img src="css/images/logo.png" alt="Nava Logo"></a>
          <ul class="navbar-list right">
            <li><a href="#"></a>TOP DESTINATIONS</li>
            <li><a href="#"></a>ADD YOUR BOAT</li>
            <li><a href="#"></a>SIGN UP</li>
          </ul>
        </div>
      </nav>
      <section id="reserver">
        <h1 class="title_big">RESERVER A BOAT NOW!</h1>
        <h6 class="title_small">AND SET YOUR SAILS INTO PARADISE!</h6>
        <div class="form-groupe">
          <form action="index.html">
            <div class="input">
              <input class="input-search" type="text" name="search" id="search" placeholder="WHAT IS YOUR DESTINATION, SAILS?">
              <button type="submit" class="submit">FIND A BOAT</button>
            </div>
          </form>
        </div>
      </section>
    </div>
  </body>
</html>

Mon code SCSS :

body {
  margin: 0; padding: 0;
  font-family: Arial, verdana, sans-serif;
}

@import "compass";
@import "font";

* {
  box-sizing: border-box;
}

.left  {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

.logo {
  float: left;
  line-height: 130px;
}

.full {
  line-height: 100px;
  height: 100px;
}

.container {
  max-width: 1497px;
  min-width: 1280px;
  margin: auto;
}

.wrap {
  background: url(images/background.jpg) no-repeat;
  width: 100%; height: 850px;
  nav.navbar {
    //position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;

    ul {
      list-style: none;
      line-height: 50px;

      li {
        display: inline-block;
        color: #f3f5fd;
        font-family: 'ralewaybold';
        padding: 10px 10px 0px 20px;
        &:hover{
          cursor: pointer; color: #3498db;
          transition-duration: 0.5s;
          @include transform(rotate(360deg));
        }

        a {
          display: block;
          font-size: 72px;
          &:hover{
            color: #f3f5fd;
          }
        }
      }
    }
  }

  section#reserver {
    margin-top: 200px;
    h1, h6 {
      display: flex;
      justify-content: center;
    }
    .title_big {
      font-size: 72px;
      font-family: 'ralewaybold';
      color: #f9fafe;
    }
    .title_small {
      font-size: 22px;
      color: #f9fafe;
      font-family: 'Myriad Pro';
      margin-top: -50px;
    }

    .form-groupe {
      display: flex;
      justify-content: center;

      .input-search {
        width: 520px;
        height: 60px;
        padding: 30px;
        color: #404040;
        font-size: 16px;
        font-family: 'ralewaybold';
        border: none;
        //@include border-radius(5px);
        @include border-top-left-radius(5px);
        @include border-bottom-left-radius(5px);
      }
      .submit {
        width: 200px;
        height: 62px;
        background: #e7434e;
        color: #f9fafe;
        cursor: pointer;
        font-family: 'ralewaybold';
        font-size: 14px;
        border: none;
        margin-left: -5px;
      }
    }
  }
}

2 réponses

Pandazaur

Salut,

Je pense que c'est lié au fait que tu aies mit une height: 62px à ton bouton mais rien à ton input. Si tu veux qu'elles soit à la même hauteur,
tu peux essayer de faire:

.input {
    display: flex;
    flex-direction: row;
}

et enlever la height de ton .input-search

graphiweb
Auteur

Bonjour, merci beaucoup pour ta réponse. Mais cela fonctionne pas, si j'enlève le height du button mon button sera petit et ce n'est pas l'effet recherché. Pour l'input, il avait bien une hauteur, je pense que tu as dû le manquer. 

.input-search {
    display: flex;
    flexk-direction: row; 
}

Cela ne fonctionne pas au contraire, le button se place en-dessous du input.