HTML의<br>탭의 li 가로 배열

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /*             */
}
#menu, #menu li {
list-style:none; /*            */
padding:0; /*           */
margin:0; /*           */
}
</style>

의 각 항목
• 은 기본적으로 세로로 배열되어 있으며, 가로로 배열될 수 있도록 CSS를 정의해야 합니다.
  Tips: 현재 내비게이션 표시줄을 끌어내어 독립적으로 설명하기 때문에 공통 스타일을 설정해야 합니다. 만약에 바디나 다른 곳에서 기본 효과를 다시 설정했다면 위 코드를 삭제할 수 있습니다.
  2. 글자를 가로로 배열
  
  탭 아래의 항목
  • 은 기본적으로 세로로 배열되어 있으며, 우리는 추가 CSS 속성을 정의하여 가로로 배열해야 합니다.

    <style type="text/css">
    #menu li { 
    float:left; /*      */
    }
    </style>

    
    3. 링크 스타일을 설정합니다.

    <style type="text/css">
    #menu li a {
    display:block; /*           */
    padding:8px 50px; /*       */
    background:#3A4953; /*       */
    color:#fff; /*        */
    text-decoration:none; /*       */
    border-right:1px solid #000; /*          */
    }
    </style>

    
    우리는 모든 메뉴를 넓게 하기 위해 안쪽 간격 (즉 패딩을 채우는 것) 을 사용합니다. 만약 메뉴가 중국어와 영문으로 혼합되어 있다면, 단일 메뉴의 넓이를 설정하면 중국어와 영문 문자의 높이가 일치하지 않아 발생하는 높이 오차를 피할 수 있습니다.고정 높이를 설정하는 방법:

    <style type="text/css">
    #menu li a {
    display:block; /*           */
    width:150px; /*      */
    height:30px; /*      */
    line-height:30px; /*     ，            ，            */
    text-align:center; /*        */
    background:#3A4953; /*       */
    color:#fff; /*        */
    text-decoration:none; /*       */
    border-right:1px solid #000; /*          */
    }
    </style>

    
    4. 링크 정지 효과:
    상기 몇 단계의 종합적인 작용을 통해 가로 내비게이션 표시줄의 초보적인 구조가 나타났다.이 단계는 주로 링크의 정지 효과를 정의하여 내비게이션 표시줄을 더욱 아름답게 한다.물론 내비게이션 표시줄을 더욱 화려하게 하려면 CSS 정지 속성에 배경 그림을 정의할 수 있습니다.

    <style type="text/css">
    #menu li a:hover {
    background:#146C9C; /*       */
    color:#fff; /*        */
    }
    </style>

    
    이 코드는 결함이 있습니다. 맨 오른쪽에 테두리가 하나 더 있습니다. 퍼스트-child 위조 클래스는 IE 시리즈 브라우저에 지원되지 않기 때문에, 마지막 테두리를 제거하고 HTML 코드에 추가 선택자를 추가할 수 있습니다.

    <ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
    <li><a href="http://www.google.com" class="last">Google.com</a></li>
    </ul>
    
    <style type="text/css">
    #menu li a.last {
    border-right:0; /*        */
    }
    </style>

    
    자, 여기까지 간단한 가로 네비게이션 메뉴 하나로 완성됐습니다. 간단하죠?다음은 전체 코드입니다.

    <style type="text/css">
    #menu { 
     font:12px verdana, arial, sans-serif; 
    }
    #menu, #menu li {
     list-style:none;
     padding:0;
     margin:0;
    }
    #menu li { 
     float:left; 
    }
    #menu li a {
     display:block;
     /*            ，       
     width:150px;
     height:30px;
     line-height:30px;
     text-align:center;
     */
     padding:8px 50px;
     background:#3A4953;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a:hover {
     background:#146C9C;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a.last {
     border-right:0; /*        */
    }
    </style>
     
    <ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
    <li><a href="http://www.google.com" class="last">Google.com</a></li>
    </ul>

    
    당신은 우리가 제작한 온라인 프레젠테이션과 본고에서 제공한 실례 패키지를 다운로드할 수 있습니다.
    위의 CSS 스타일을 제가 수정했습니다.다음과 같습니다.