수다닷컴

ul·li 메뉴 아래 테두리 겹침 해결 방법이 궁금해요

연하얀 2026.10.22 댓글 5

테이블로만 작업하다가 div로 메뉴를 만들어 보니 헷갈리네요.
ul과 li로 메뉴를 구성했는데 li의 아래 테두리와 바깥쪽 테두리가 겹쳐 맨 아래가 두 줄로 보여요.
이런 메뉴는 어떻게 코딩하는 게 좋을까요? div로 바꾸는 과정도 생각보다 어렵네요.

댓글 5

  • 소심한여자 2026.10.23

    각 줄의 너비가 고정이라면 이런 식으로 스타일을 줄 수 있어요.
    #navi {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #dcdcde;
    border-left: 1px solid #dcdcde;
    }

  • 꽃큰 2026.10.23

    div는 필요 없고 ul과 li만으로 마크업할 수 있어요.
    ul id="navi"
    li 안에 이미지
    li 안에 이미지
    li 안에 이미지

  • 키움 2026.10.22

    마지막 li에 end 클래스를 주고 li.end에 border:none을 적용해 보세요.

  • 솔찬 2026.10.22

    ul에는 위쪽과 오른쪽 테두리를, li에는 아래쪽과 왼쪽 테두리를 주면 겹치지 않아요. ul에 여백이 있다면 조정해 주세요.

  • 하린 2026.10.22

    간단하게 ul에 menu 클래스를 주고 li에 스타일을 적용하면 돼요.
    .menu { float: left; width: 167px; margin: 0; }
    .menu li { margin: 0; padding: 6px 0 6px 12px; border: 1px solid #dadada; background: #f4f5f6; list-style: none; }
    div는 디자인상 필요할 때만 감싸도 괜찮아요.