테스트 사이트 - 개발 중인 베타 버전입니다

안녕하세요 css간격좀 줄이고 싶습니다; 채택완료

완전초보에여 2년 전 조회 2,190

 

이름과 포인트 사이 간격이랑 전체포인트순위 글씨랑 아래 랭킹 위아래 간격을 줄이고 싶습니다;

어떻게 해야될까요?ㅠㅠ

 

 

point_rank10.php 소스 입니다

</p>

<p><?php

include_once("./_common.php");

?>

<style type="text/css">

.pl_rank{clear:both;position:relative;margin:0 auto;width:210px;padding:5px 0 5px}

.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}

/*.pl_rank h2{padding:0 10px;height:28px;line-height:2.4em;border:1px solid #cdd6de;background:#f2f5fc;color:#494a4a}*

*/

.pl_rank h2{padding:0 10px;height:28px;line-height:5px;color:#CCCCCC;text-align: center}

.pl_rank_ul{padding:0px 0 0}

.pl_rank_ul ul{float:left;width:210px;margin:0;padding:0;overflow:hidden;list-style:none;color:#968d66}

.pl_rank_ul ul li{position:relative;line-height:18px;margin:5px 0}

.pl_rank_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;border:1px solid #b3b8c0;text-align:center;color:#b3b8c0;text-indent:-1px}

.pl_rank_ul ul li .rank_bg1{border:1px solid #ed2525;color:#ed2525}

.pl_rank_ul ul li .rank_bg2{border:1px solid #3452be;color:#3452be}

.pl_rank_ul ul li .rank_point{display:inline-block;position:absolute;top:0;right:20px;font-family:verdana;color:#d83d44;font-size:10px;font-weight:bold;text-align: center}

</style></p>

<p><div class="pl_rank">

<h2>전체 포인트 순위</h2>

<div class="pl_rank_ul">

<ul>

<?php

$sql_common = " and mb_id != '{$config[cf_admin]}' ";

$rank_rows = 10; //출력 수

$sql = " select * from {$g5[member_table]} where mb_point > '{$row[mb_point]}' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";

$result = sql_query($sql);

for ($i=0; $row=sql_fetch_array($result); $i++) {

    $rank = number_format($i + 1);

    //$rank_name = get_sideview($row['mb_id'], $row['mb_nick'], $row['mb_email'], $row['mb_homepage']);

    $rank_name = $row['mb_nick'];

    $point = number_format($row['mb_point']);

    if ($rank == 1) {

        $rank_bg = ' rank_bg1';

    } else if ($rank <= 3) {

        $rank_bg = ' rank_bg2';

    } else {

        $rank_bg = '';

    }

?>

    <li><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span><?php echo $rank_name; ?><span class="rank_point"><?php echo $point; ?></span></li>

<?php } ?>

</ul>

</div>

</div></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
2년 전

</p>

<p><style type="text/css">

:root {

    --v-pl_rank-width: 210px;

}

/* .pl_rank{clear:both;position:relative;margin:0 auto;width:210px;padding:5px 0 5px} */

.pl_rank{clear:both;position:relative;margin:0 auto;width:var(--v-pl_rank-width);padding:5px 0 5px}

.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}

/*.pl_rank h2{padding:0 10px;height:28px;line-height:2.4em;border:1px solid #cdd6de;background:#f2f5fc;color:#494a4a}*

*/

/* .pl_rank h2{padding:0 10px;height:28px;line-height:5px;color:#CCCCCC;text-align: center} */

.pl_rank h2{padding:0;line-height:5px;color:#CCCCCC;text-align: center}

.pl_rank_ul{padding:0px 0 0}

/* .pl_rank_ul ul{float:left;width:210px;margin:0;padding:0;overflow:hidden;list-style:none;color:#968d66} */

.pl_rank_ul ul{float:left;width:var(--v-pl_rank-width);margin:0;padding:0;overflow:hidden;list-style:none;color:#968d66}

/* .pl_rank_ul ul li{position:relative;line-height:18px;margin:5px 0} */

.pl_rank_ul ul li{position:relative;line-height:18px;margin:5px 0 0 1em;}

.pl_rank_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;border:1px solid #b3b8c0;text-align:center;color:#b3b8c0;text-indent:-1px}

.pl_rank_ul ul li .rank_bg1{border:1px solid #ed2525;color:#ed2525}

.pl_rank_ul ul li .rank_bg2{border:1px solid #3452be;color:#3452be}

.pl_rank_ul ul li .rank_point{display:inline-block;position:absolute;top:0;right:20px;font-family:verdana;color:#d83d44;font-size:10px;font-weight:bold;text-align: center}

</style></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

완전초보에여
2년 전
해결 했습니다.ㅎ

댓글을 작성하려면 로그인이 필요합니다.

.pl_rank{clear:both;position:relative;margin:0 auto;width:210px;padding:5px 0 5px} 뒤에 5px를 원하는 간격으로 줄이세요.
.pl_rank_ul ul li .rank_point{display:inline-block;position:absolute;top:0;right:20px;font-family:verdana;color:#d83d44;font-size:10px;font-weight:bold;text-align: center}
right:20px;를 원하는 간격으로 줄이세요.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

완전초보에여
2년 전
처리했어요 ^^ㅎ

댓글을 작성하려면 로그인이 필요합니다.

웅푸
2년 전
.pl_rank_ul ul li{position:relative;line-height:18px;margin:5px 0}

랭킹 위아래 간격은 여기서 margin:5px 0

 

다음은css 에서  .pl_rank_ul ul li .rank_name{margin-right:5px} 추가 중간간격 해주시구.

아래 중간랭킹네임 부분에 클래스 요소 정의 해주시면됩니다.

  • 로그인 후 평가할 수 있습니다

    답변에 대한 댓글 2개

    완전초보에여
    2년 전
    어렵네용ㅎ
    웅프
    2년 전
    찬찬히 느림의 미학으로 하시면 됩니다. 응원할께요 화이팅~!

    댓글을 작성하려면 로그인이 필요합니다.

    답변을 작성하려면 로그인이 필요합니다.

    로그인