ul, li로 된 갤러리 항상 가운데에 위치하려면..
조회수 655회
안녕하세요.
ul, li 태그로 된 갤러리를 웹사이트에 적용중입니다.
li에 있는 아이템들중에 사진이 여러개라서 썸네일 화면에는 노출이 되지않길 바라는애들을 display:none해둔 상태입니다.
이상태에서 float:left를 지우면 inline-block 을해도 한줄에 아이템이 하나씩밖에 뜨질않아요..
그래서 대충 마진 레프트 라이트를 vw로 맞춰서 대충 해둔 상태인데 ㅠ 반응형으로 만들고싶습니다...
.demo-gallery {
text-align: center;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.demo-gallery>ul {
text-align: center;
margin-bottom: 0;
}
.demo-gallery>li {
text-align: center;
display: inline-block;
}
.demo-gallery>ul>li {
margin-bottom: 20px;
margin-right: 20px;
width: 400px;
}
.demo-gallery>ul>li a {
border-radius: 3px;
overflow: hidden;
position: relative;
}
어떻게 해야할까요? ㅠㅠ
미리 감사드립ㄴ디ㅏ..
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
사이트를 열어봤습니다. 고생이 많으시네요. 이런 사이트라면 wix 같은거 쓰셔도 될텐데 아무튼... style.css 에서:
.works
의margin-left
,margin-right
를 지우세요..demo-gallery > ul > li
의 스타일을 다음과 같이 수정합니다.float
,margin-right
를 지우세요.width: 400px;
은max-width: 400px;
로 바꾸시고,width: 100%;
를 추가하세요.
- 원하시는 것이 달성되었는지 확인해 보세요.
참고로, "반응형"으로 만들 때:
- 웬만하면 '좌우 여백'이나 '가로 너비'를 특정하지 않습니다. 기본적으로 너비는 (전체 window 너비를 기준으로) 자동으로 잡히도록 해야 하며, 전체 너비를 사용하는 요소는
display: block;
이어야 합니다. (그래서max-width
를 사용,vw
단위는 반응형 스타일링의 기본은 아님) - 웬만하면
float
걸지 않습니다. (정확한 통제 없이 사용하면 레이아웃 망침)
- 너무 감사합니다ㅠㅠ 알 수 없는 사용자 2021.2.28 06:07
- 바로 되네요.. 근데 한줄에 두개씩 나오게 하는방법은 없을까요? 가운데로는 오는데 하나씩만 나와서요ㅠ 알 수 없는 사용자 2021.2.28 06:12
- 그건 좀 다른 문제입니다. 모바일 화면 너비 / PC 화면 너비 등 모든 상황에서 2열로 나와야 하는 건가요? 그건 아닐 거거든요. 혹시 시간이 되시면 Bootstrap 같은 CSS 프레임워크를 공부해 보시면 좋을 거 같습니다. https://getbootstrap.com/docs/5.0/layout/grid/ 엽토군 2021.2.28 13:22
- 감사합니다. 아뇨 pc화면에서만 2열로 나오게하고싶은데 맔 알 수 없는 사용자 2021.2.28 21:59
- 말씀해주신 방법대로하니까 둘다 1열로만 나와서요.. 네 지금 다시 차근차근 공부해보고있는중인데.. 이미 해본거 해결을해보고싶어서 ㅠㅠ.. 알 수 없는 사용자 2021.2.28 21:59
- 댓글이 없어졌네여 ㅠㅠ 알 수 없는 사용자 2021.3.1 06:42
- 네 안그래도 다시 공부중인데.. 일단 해놓은건 마무리지어보고싶어서.. 피씨에서만 2열로 나오고싶은데 지금 둘다 1열로 나오는상황이라서요 ㅠㅠ 알 수 없는 사용자 2021.3.1 06:43
댓글 입력