비디오: CSS 실전예제, 3차 메뉴 만들기 2024
때로는 수평 단추 막대가 필요합니다. HTML5 목록은 수직적 인 경향이 있기 때문에 수평 목록을 사용할 수 없다고 생각하는 경향이 있습니다. 사실, CSS3는 정확히 동일한 HTML을 가로 목록으로 변환하는 데 필요한 모든 것을 제공합니다.
HTML을 전혀 표시하지 않아도 HTML을 다시 표시 할 필요가 없습니다. (CSS가 웅대하지는 않습니까?) 심지어 CSS는 많이 바뀌지 않았습니다.
# 메뉴 ul {여백 - 왼쪽: -2. 5em;} #menu li {list-style-type: none; 너비: 7em; 텍스트 정렬: 가운데; float: left;} #menu a {텍스트 장식: 없음; 검정색; 디스플레이: 블록; background-color: #EEEEFF; 상자 그림자: 5px 5px 5px 회색; margin-bottom: 2px; margin-right: 2px; border-radius: 5px; border: 3px outset #EEEEFF;} #menu a: hover {background-color: #DDDDEE; 상자 그림자: 3px 3px 3px 회색; border: none;}
변경 사항은 매우 간단합니다.
-
각 li에 부동 소수점을 주어 각 목록 항목을 플로팅합니다. 왼쪽 값:
#menu li {list-style-type: none; 왼쪽으로 뜨다; 너비: 5em; -
#menu ul {margin-left: -2 (text-align: center;})
li 요소에서 여백을 남긴 서식을 취하여 ul에 전송하여 전체 ul의 왼쪽 여백을 이동합니다.. 5em;}
-
오른쪽 여백을 추가하십시오.
버튼 막대가 수평이되었으므로 각 버튼의 오른쪽에 작은 공간을 추가하여 함께 보이지 않게합니다.
margin-right: 2px;
