홈>2020-03-18 13:25

html - 버튼은 다른 요소 형태보다 낮습니다

버튼 태그가 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;
  }
}

}

여기 화면이 있습니다 :

htmlcss

답변 # 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>

Python2.net

html - 버튼은 다른 요소 형태보다 낮습니다

관련 자료