[ - 다시 ]의 간격을 일정하게 하기 문의 입니다
본문
<style>
ul.test {
list-style-type: none;
}
ul.test li > span:first-child::after {
content: '------';
margin: 0 0.2em;
}
</style>
<ul class="test">
<li><span>가동</span>1</li>
<li><span>나동</span>2</li>
</ul>
베르만님의 소스 끝-----------
가나다동을 wr-로 불러오고 123도 wr-로 불러오고
그 사이에 [ -다시]가 들어가기 때문에
글자갯수가 틀리면 1,2,3 숫자가 정열이 제대로 안되네요
가나다라동이라면 뒤에 숫자가 정열이안되네요
가동------1
가나다동------2 이런식으로 숫자가 정열이 안되네요
즉 이런식으로요 되야 하는데요.....
가동----------1
가나다동-----2
그누보드에 자주 나오는 소스가 아니다 보니
구글링에도 잘 안나오고 해결하기가 쉽지가 않아 문의 드려 봅니다
.......읽어봐주셔서 감사 합니다....... 그누보드 회원님들 수고하세요 ~~~!!!
답변 2
그런 경우 다음과 같이 표현하는 방법이 있습니다.
<style>
ul.test {
list-style-type: none;
}
/*ul.test li > span:first-child::after {
content: '------';
margin: 0 0.2em;
}*/
ul.test li {
display: flex;
}
ul.test li > span:first-child {
flex-grow: 1;
border-bottom: 1px dashed #000;
margin: 0 0.4em 0.5em 0.4em;
}
</style>
<ul class="test">
<li>가동<span></span>1</li>
<li>가나동<span></span>2</li>
<li>가나다동<span></span>3</li>
</ul>
원하시는 바를 정확하게 정석적인 방법으로 처리하려면 css 만으로는 불가능 합니다.
php 혹은 자바스크립트를 통해 자릿 수를 체크한 후 for 등으로 반복하거나 하는 방법으로 작업하시거나
최대 자릿수를 정해 놓고 미달된 글자수의 경우 --- 을 추가하는 방식으로 작업하셔야 합니다.
만약 화면에 보이는 것만 해결하고 싶으시다면 --- 부분은 position으로 width: 100%; 정렬하신 후 텍스트에 background: #FFF; 흰색 배경색을 넣어보세요, 이때 텍스트의 z-index는 ---의 값보다 높아야 합니다.
해결되시면 채택 한번 부탁드립니다.^^
답변을 작성하시기 전에 로그인 해주세요.
