입력 옆의 텍스트 레이블에 CSS를 적용하는 방법은 무엇입니까?

Chinovski

이 작은 코드에는 텍스트 (레이블)와 텍스트 입력이 포함되어 있습니다.

내가 찾고있는 것은 텍스트 + 입력이 div의 100 %를 차지하도록하는 것입니다 (예 : 텍스트의 경우 20 %, 입력의 경우 80 %) 텍스트는 영역의 중앙에 있어야하며 배경은 입력과 높이가 같습니다. .

나는 background-color: blue;div에 적용하면서 span으로 시도했지만 아무런 영향을 미치지 않았습니다.

당신은 그것을 할 호를 알고 있습니까?

미리 감사드립니다.

#zoneFiltre {
    width: 100%;
}

.champs {
    width:20%;
    background-color: blue;
    text-align: middle;
    color: white;
}

#filtreMultiAptitudes{
    width:80%;
    float:right;
}
<div id="listeMultiAptitude">
    <div class="zoneFiltre">
      <label class="champs">filter: </label>
      <input type="text" id="filtreMultiAptitudes" />
    </div>
</div>

네나드 브라 카

사용하고자하는 경우, Flexbox당신은 사용할 수 있습니다 flex: 0 0 80%inputflex: 1label또한text-align: center

.zoneFiltre {
  display: flex;
}
.champs {
  flex: 1;
  background-color: blue;
  text-align: center;
  color: white;
}
#filtreMultiAptitudes {
  flex: 0 0 80%;
}
<div id="listeMultiAptitude">
  <div class="zoneFiltre">
    <label class="champs">filter: </label>
    <input type="text" id="filtreMultiAptitudes" />
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

모바일 브라우저의 입력 옆에 HTML 레이블 텍스트를 유지하는 방법은 무엇입니까?

분류에서Dev

모바일 브라우저의 입력 옆에 HTML 레이블 텍스트를 유지하는 방법은 무엇입니까?

분류에서Dev

CSS에서 Font Awesome 아이콘 옆에 텍스트 블록을 입력하는 방법은 무엇입니까?

분류에서Dev

텍스트 입력 바로 옆에 텍스트를 작성하는 방법은 무엇입니까?

분류에서Dev

컨테이너 내부의 텍스트 옆에 이미지를 정렬하는 방법은 무엇입니까?

분류에서Dev

이온 경고 내의 텍스트에 CSS를 적용하는 방법은 무엇입니까?

분류에서Dev

다른 양식 Visual Basic에서 레이블의 텍스트를 변경하는 방법은 무엇입니까?

분류에서Dev

D3.js에서 레이블의 텍스트 각도를 변경하는 방법은 무엇입니까?

분류에서Dev

D3 : 입력 요소 뒤에 레이블 텍스트를 만드는 방법은 무엇입니까?

분류에서Dev

Tcl / Tk에서 레이블의 텍스트를 자동으로 감싸는 방법은 무엇입니까?

분류에서Dev

Tkinter / TTK에서 레이블의 텍스트를 조금 넘기는 방법은 무엇입니까?

분류에서Dev

HTML / CSS에서 텍스트를 이미지 옆에 뜨는 방법은 무엇입니까?

분류에서Dev

jquery를 사용하여 동적 입력 텍스트의 값을 얻는 방법은 무엇입니까?

분류에서Dev

JS 입력 양식의 데이터를 텍스트에 저장하는 방법은 무엇입니까?

분류에서Dev

이 효과를 텍스트의 마지막 줄에 적용하는 방법은 무엇입니까?

분류에서Dev

Laravel 양식 텍스트 입력에 정적 텍스트를 추가하는 방법은 무엇입니까?

분류에서Dev

CSS에서 위의 텍스트에 따라 텍스트를 정렬하는 방법은 무엇입니까?

분류에서Dev

div 내의 모든 입력 레이블을 텍스트 들여 쓰기하는 방법은 무엇입니까?

분류에서Dev

두 텍스트 입력 간의 날짜 차이를 계산하는 방법은 무엇입니까?

분류에서Dev

특정 줄의 파일에 텍스트를 입력하는 방법은 무엇입니까?

분류에서Dev

CMD 창에 텍스트를 입력하는 방법은 무엇입니까?

분류에서Dev

인용구 텍스트 HTML 옆에 별표를 추가하는 방법은 무엇입니까?

분류에서Dev

프라임 페이스 입력 텍스트를 동적으로 삽입하는 방법은 무엇입니까?

분류에서Dev

Flutter : 입력 장식 내부의 힌트 텍스트 옆에 아이콘을 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

iOS에서 두 개의 레이블 텍스트를 다른 레이블 아래에 표시하는 방법은 무엇입니까?

분류에서Dev

ToolStripMenuItem (또는 유사한 컨트롤)의 텍스트 옆에 이미지를 배치하는 방법은 무엇입니까?

분류에서Dev

응답 성을 유지하면서 플로팅 된 이미지 옆에 단락의 텍스트 나누기를 방지하는 방법은 무엇입니까?

분류에서Dev

응답 성을 유지하면서 플로팅 된 이미지 옆에 단락의 텍스트 나누기를 방지하는 방법은 무엇입니까?

분류에서Dev

Robot Framework의 입력 필드에서 텍스트를 가져 오는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    모바일 브라우저의 입력 옆에 HTML 레이블 텍스트를 유지하는 방법은 무엇입니까?

  2. 2

    모바일 브라우저의 입력 옆에 HTML 레이블 텍스트를 유지하는 방법은 무엇입니까?

  3. 3

    CSS에서 Font Awesome 아이콘 옆에 텍스트 블록을 입력하는 방법은 무엇입니까?

  4. 4

    텍스트 입력 바로 옆에 텍스트를 작성하는 방법은 무엇입니까?

  5. 5

    컨테이너 내부의 텍스트 옆에 이미지를 정렬하는 방법은 무엇입니까?

  6. 6

    이온 경고 내의 텍스트에 CSS를 적용하는 방법은 무엇입니까?

  7. 7

    다른 양식 Visual Basic에서 레이블의 텍스트를 변경하는 방법은 무엇입니까?

  8. 8

    D3.js에서 레이블의 텍스트 각도를 변경하는 방법은 무엇입니까?

  9. 9

    D3 : 입력 요소 뒤에 레이블 텍스트를 만드는 방법은 무엇입니까?

  10. 10

    Tcl / Tk에서 레이블의 텍스트를 자동으로 감싸는 방법은 무엇입니까?

  11. 11

    Tkinter / TTK에서 레이블의 텍스트를 조금 넘기는 방법은 무엇입니까?

  12. 12

    HTML / CSS에서 텍스트를 이미지 옆에 뜨는 방법은 무엇입니까?

  13. 13

    jquery를 사용하여 동적 입력 텍스트의 값을 얻는 방법은 무엇입니까?

  14. 14

    JS 입력 양식의 데이터를 텍스트에 저장하는 방법은 무엇입니까?

  15. 15

    이 효과를 텍스트의 마지막 줄에 적용하는 방법은 무엇입니까?

  16. 16

    Laravel 양식 텍스트 입력에 정적 텍스트를 추가하는 방법은 무엇입니까?

  17. 17

    CSS에서 위의 텍스트에 따라 텍스트를 정렬하는 방법은 무엇입니까?

  18. 18

    div 내의 모든 입력 레이블을 텍스트 들여 쓰기하는 방법은 무엇입니까?

  19. 19

    두 텍스트 입력 간의 날짜 차이를 계산하는 방법은 무엇입니까?

  20. 20

    특정 줄의 파일에 텍스트를 입력하는 방법은 무엇입니까?

  21. 21

    CMD 창에 텍스트를 입력하는 방법은 무엇입니까?

  22. 22

    인용구 텍스트 HTML 옆에 별표를 추가하는 방법은 무엇입니까?

  23. 23

    프라임 페이스 입력 텍스트를 동적으로 삽입하는 방법은 무엇입니까?

  24. 24

    Flutter : 입력 장식 내부의 힌트 텍스트 옆에 아이콘을 중앙에 배치하는 방법은 무엇입니까?

  25. 25

    iOS에서 두 개의 레이블 텍스트를 다른 레이블 아래에 표시하는 방법은 무엇입니까?

  26. 26

    ToolStripMenuItem (또는 유사한 컨트롤)의 텍스트 옆에 이미지를 배치하는 방법은 무엇입니까?

  27. 27

    응답 성을 유지하면서 플로팅 된 이미지 옆에 단락의 텍스트 나누기를 방지하는 방법은 무엇입니까?

  28. 28

    응답 성을 유지하면서 플로팅 된 이미지 옆에 단락의 텍스트 나누기를 방지하는 방법은 무엇입니까?

  29. 29

    Robot Framework의 입력 필드에서 텍스트를 가져 오는 방법은 무엇입니까?

뜨겁다태그

보관