다음은 반응형 탐색 메뉴 내에 검색 상자를 추가하는 코드입니다. −
예시
문서 <스타일>본문 { 여백:0px; 여백 상단:10px; 패딩:0px;}nav { 너비:100%; 배경색:rgb(39, 39, 39); 오버플로:자동; 높이:자동;}.links { 디스플레이:인라인 블록; 텍스트 정렬:가운데; 패딩:14px; 색상:rgb(178, 137, 253); 텍스트 장식:없음; font-size:17px;}.links:hover { background-color:rgb(100, 100, 100);}input[type="text"] { float:right; 패딩:6px; 여백 상단:8px; 여백 오른쪽:8px; font-size:17px;}.selected { background-color:rgb(0, 18, 43);}@media 화면 및 (최대 너비:830px) {.links { display:block;}input[type="text "] { 표시:차단; 너비:100%; 여백:0px; border-bottom:2px solid rgb(178, 137, 253); text-align:center;}}출력
이것은 다음과 같은 출력을 생성합니다 -
화면 크기가 830px로 조정되면 다음과 같은 출력이 생성됩니다. -
