CODEWITHSUNDEEP
htmlcss
Emilien
Emilien

Reputation: 2761

button is lower than others elements form

I just would like to know why my button tag is lower than select tag ?

This is my HTML :

<div class="wrap-form-planning">
    <form class="form_search_order form-planning" name="form_search_client">

        <!-- Chauffeur -->
        <select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
            <option value="" selected>Nom du chauffeur</option>
                <option value="1">1</option>
                <option value="2">2</option>
        </select>

        <!-- Client -->
        <select type="search" name="client_name[]" class="select-client" multiple size="2">
            <option value="" selected>Nom du client</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>

        <!-- Semaine -->
        <select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
            <option value="" selected>Semaine</option>
                <option value="1">1</option>
                <option value="2">2</option>
        </select>

        <button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
    </form>
</div>

My CSS :

.wrap-form-planning{
  display: block;
  background-color: $bleu;
  padding: 20px 0;
  text-align: center;
}

.form-planning{
  width:80%;
  max-width: 1080px;
  margin: auto;
  margin-right: 10px;

  select{
    font-size: 14px;
    margin-right: 10px;
    width: (14%-10px);
    border-radius: 0;

    &.select-chauffeur{
      min-width: 150px;
    }

    &.select-client{
      min-width: 120px;
    }

    &.select-semaine{
      min-width: 90px;
      margin-right: 0;
    }
  }

.inp-submit-form-planning{
  font-size: 14px;
  color: white;
  background: $bleu;
  border: solid 2px white;
  padding: 4px 9px;

  &:hover{
    color: $bleu;
    background: white;
    cursor: pointer;
    transition: 0.6s;
  }
}

}

here is a screen : enter image description here

Upvotes: 0

Views: 1331

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

They're different sized inline-block elements, so they will aligned baseline by default. You also have a 2px white border on the search icon

You can use form.form_search_order > * { vertical-align: middle; } whatever vertical-align property you want.

But I would use a flex layout. Add display: flex to the form, and use align-items to align them vertically however you want. Also added justify-content: center to horizontally center them since you had text-align: center on the parent originally.

body {
  background: blue;
}

.wrap-form-planning {
  display: block;
  padding: 20px 0;
  text-align: center;
}

.form-planning {
  width: 80%;
  max-width: 1080px;
  margin: auto;
  margin-right: 10px;
}
.form-planning select {
  font-size: 14px;
  margin-right: 10px;
  width: calc(14% - 10px);
  border-radius: 0;
}
.form-planning select.select-chauffeur {
  min-width: 150px;
}
.form-planning select.select-client {
  min-width: 120px;
}
.form-planning select.select-semaine {
  min-width: 90px;
  margin-right: 0;
}
.form-planning .inp-submit-form-planning {
  font-size: 14px;
  color: white;
  border: solid 2px white;
  padding: 4px 9px;
}
.form-planning .inp-submit-form-planning:hover {
  background: white;
  cursor: pointer;
  transition: 0.6s;
}

form.form_search_order {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrap-form-planning">
    <form class="form_search_order form-planning" name="form_search_client">

        <!-- Chauffeur -->
        <select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
            <option value="" selected>Nom du chauffeur</option>
                <option value="1">1</option>
                <option value="2">2</option>
        </select>

        <!-- Client -->
        <select type="search" name="client_name[]" class="select-client" multiple size="2">
            <option value="" selected>Nom du client</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>

        <!-- Semaine -->
        <select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
            <option value="" selected>Semaine</option>
                <option value="1">1</option>
                <option value="2">2</option>
        </select>

        <button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
    </form>
</div>

Upvotes: 3

Related Questions