집 > 기사 > 웹 프론트엔드 > CSS의 인라인 목록 항목을 사용하여 가로 탐색 모음 만들기

CSS의 인라인 목록 항목을 사용하여 가로 탐색 모음 만들기

PHPz앞으로: 2023-08-29 14:29:11558검색

使用 CSS 中的内联列表项构建水平导航栏

인라인 목록 항목을 사용하여 가로 탐색 모음을 만듭니다.

요소를 인라인으로 설정하세요.

예

다음 코드를 실행하여 가로 탐색 모음을 만들 수 있습니다.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         .active {
            background-color: #4CAF50;
            color: white;
         }
         li {
            border-bottom: 1px solid #555;
            display: inline;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#company" class="active">Company</a></li>
         <li><a href = "#product">Product</a></li>
         <li><a href = "#services">Services</a></li>
         <li><a href = "#contact">Contact</a></li>
      </ul>
   </body>
</html>

위 내용은 CSS의 인라인 목록 항목을 사용하여 가로 탐색 모음 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：프로그레시브 렌더링이란 무엇입니까?다음 기사：프로그레시브 렌더링이란 무엇입니까?