>

버튼 태그가 select 보다 낮은 이유를 알고 싶습니다.  태그?

이것은 내 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>

내 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;
  }
}

}

여기 화면이 있습니다 :

  • 답변 # 1

    크기가 다른 inline-block  요소, 그래서 그들은 baseline 를 정렬합니다  기본적으로. 또한 검색 아이콘에 2px 흰색 테두리가 있습니다

    form.form_search_order > * { vertical-align: middle; } 를 사용할 수 있습니다  어떤 vertical-align  당신이 원하는 속성.

    그러나 플렉스 레이아웃을 사용합니다. display: flex 추가  양식을 작성하고 align-items 를 사용하십시오.  원하는대로 수직으로 정렬합니다. justify-content: center 도 추가 함   text-align: center 이후 수평으로 중앙에  원래 부모에게.

    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>
    
    

  • 이전 ibm content navigator - ICN onLogout 이벤트 중지
  • 다음 C # (wpf) 폴더에있는 클래스에 액세스하는 방법은 무엇입니까?