모바일 기기에서 들여쓰기된 콘텐츠의 오른쪽 여백 패딩을 제거하는 방법이 있을까요?
좁은 화면에서 거울처럼 좌우로 적용된 들여쓰기가 가로 화면 공간을 겨우 몇 글자만 남게 할 정도로 좁혀 버립니다. 줄바꿈이 엉망이 되죠!
저는 TV에서 CSS 전문가를 연기하는 것도 아니고, 어젯밤 홀리데이 인에 묵지도 않았어요.
하지만, 모바일 CSS에서 ul 또는 li의 패딩을 변경해 볼 수는 없을까요? padding-left를 %나 vw로 줄이거나, 아니면 그냥 px 값을 좀 줄이는 것도 방법일 것 같아요.
아마 여기 누군가는 잠을 자면서도 이걸 답할 수 있을 거예요. 전체적으로 모두에게 좋을 수 있고, 여러분이 그냥 그걸 먼저 발견한 것일 수도 있죠.
아니면, 아닐 수도 있겠네요 
그 제안에 감사드립니다. 인덱스 단계를 4에서 2로 줄이면 도움이 될 것입니다. 하지만 저는 오른쪽에 추가되는 미러 패딩에 대해 더 우려하고 있습니다. 모바일에서는 해당 패딩을 완전히 제거하는 것이 가장 좋습니다.
감사합니다! 이 Discourse 사이트는 비교적 신규로 개설되었습니다. 오픈소스 계보학 프로젝트인 'Gramps’의 메일링 리스트를 대체하기 위해 실험을 진행 중입니다. 그래서 아직 학습 곡선의 가파른 단계에 있습니다.
스크린 캡처는 Android 앱 4버전에서 촬영한 것입니다. Chrome에서도 동일한 문제가 재현됩니다.
해당 게시글 링크는 다음과 같습니다:
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5
웹마스터가 잘 처리하지 못한 것 같네요. 오른쪽에 여전히 큰 빈 공간이 남아 있는 것으로 보입니다.
왼쪽 패딩은 줄였지만, 오른쪽 패딩은 그대로 두었네요.
@smrtey 님의 해결책이 맞습니다. 오른쪽 패딩을 완전히 제거해야 합니다.
이 오른쪽 패딩은 오른쪽에서 왼쪽으로 쓰는 언어에 대해 올바른 패딩을 확보하기 위해 설정된 것으로 추정되지만, 왼쪽에서 오른쪽으로 쓰는 언어에는 존재할 이유가 없습니다.
감사합니다!
다양한 실험을 해본 결과, 좌우 대칭으로 15px의 들여쓰기를 사용하는 것이 좋았습니다.
우측 여백을 완전히 주석 처리해 보았지만, 아무 변화가 없었습니다! (아마도 값이 상속되는 문제일 것입니다.)
여러 시도를 하며 캡처한 내용과 함께 우리 로컬 토론에 대한 링크를 공유합니다.
이상하네요.
아래를 시도해 보셨나요:
.cooked ul[dir="ltr"] {
padding-right: 0;
padding-left: 15px;
}
작동하지 않고 다른 규칙에 의해 덮어쓰기는 경우, 더 정확한 선택자를 사용해 볼 수 있습니다:
.topic-post .cooked ul[dir="ltr"] {
padding-right: 0;
padding-left: 15px;
}
아니요, 우리는 명시적인 0 값을 시도하지 않았습니다. 저는 항상 파라미터 전달에서 0이 특수한 경우로 처리되는 일이 너무 잦다고 주장해 왔습니다. 따라서 0은 실험적 진단에 나쁜 선택인 경향이 있습니다.
그래서 우리는 15px를 사용하기로 했고, 더 이상 실험할 필요를 느끼지 않았습니다. 그 값이 우리의 요구사항을 충족했기 때문입니다.
하지만, 주석 처리를 했음에도 불구하고 그 문제가 해결되지 않은 것은 분명 이상했습니다. 그리고 감사합니다!
이미 존재하는 padding-right: 40px;를 주석 처리했다면 작동했을 것입니다. 하지만 단순히 //padding-right: 40px;를 새로운 규칙으로 작성하는 것은 아무런 효과가 없습니다.
기존의 padding-right: 40px;를 취소하는 올바른 방법은 명시적으로 padding-right: 0;을 작성하여 이전 값을 새로운 규칙으로 오버라이드하는 것입니다. 