초보 코딩 질문드려요~~
본문
.sub21_menu ul li {width:216px; height:70px; float:left; border:1px solid #ccc}
--------------
상단처럼 클래스를 주면 각 li들에 border는 들어가는데 border들이 겹치는 부분은
보기 안좋게 두껍게 나오는데요
그렇다고 margin 값을 줘서 각 li들을 떨어트리고 싶지는 않은데요
위처럼 깔끔하게 보이게 할려면
혹시 해결하는 방법이 있나요?..
알려주시면 감사하겠습니다 ^^ !
답변 3
.sub21_menu ul li {width:216px; height:70px; float:left; border:1px solid #ccc;border-right:0}
.sub21_menu ul li:last-child {border-right:1px solid #ccc}
이런식으로 마지막 요소를 제외한 나머지 오른쪽 경계선을 없애시거나
margin-right:10px 이런식으로 마진을 주셔도 됩니다
li:first-child 스타일을 활용하시면됩니다.
첫번째만 border 를 전체 주시고
첫번째 이후 (공통) 에는 border-left 를 0 으로 주시면됩니다.
ul li { border:1px solid #000; border-left:0px; /* 공통 */ }
ul li:first-child { border:1px solid #000; /* 첫번째 */ }
first-child 예제
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild_more3
감사합니다 !
