이거 원인이 뭘까요?
관련링크
본문
첫 번째 이미지 보면 / 기호가 밑으로 내려가 있습니다.
레이아웃 구성은 현재 두 번째 이미지처럼 되어 있어요.
즉, 이미지들 밑으로 여백이 생겨서 밑으로 내려갑니다.
원인이 대체 뭘까요? 아래 스타일을 줘도 안 듣네요.
#head_sns * {margin:0; padding:0; }
주소는 아래와 같습니다.
이런 경우는 CSS 공부한 후, 처음 겪네요. ㅎ
답변 8
- display: inline-block;
- float: left;
이렇게 해보세요.
<li> 시작이 빠져 있네요....^^
<style>
#head_sns {display:inline; margin:0; padding:0}
.at-lnb ul > li {border:0px solid silver;}
#head_sns * {margin:0 !important; padding:0 !important; }
</style>
<div id="head_sns">
<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F" class="sns-icon social_link sns-naver" title="네이버">
<img src='https://homzzang.com/img/head/social/naver.png' alt='Naver'>
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F" class="sns-icon social_link sns-kakao" title="카카오">
<img src='https://homzzang.com/img/head/social/kakao.png' alt='Kakao'>
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F" class="sns-icon social_link sns-google" title="구글">
<img src='https://homzzang.com/img/head/social/google.png' alt='Google'>
</a>
<script>
jQuery(function($){
$("#head_sns").on("click", "a.social_link", function(e){
e.preventDefault();
var pop_url = $(this).attr("href");
var newWin = window.open(
pop_url,
"social_sing_on",
"location=0,status=0,scrollbars=1,width=600,height=500"
);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');
return false;
});
});
</script>
</div>
</li>
!-->
원은은 모르겠으나
#head_sns{
display:inline-block;
}
추가해 보세요
<style>li #head_sns ::after {
float: right;
color: #ccc;
content: "/";
margin-right: -17px;
}
</style>
죄송합니다 위에 제대로 안읽어서
!-->
<ul>
<li>
<div id="head_sns">
<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F" class="sns-icon social_link sns-naver" title="네이버">
<img src="https://homzzang.com/img/head/social/naver.png" alt="Naver">
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F" class="sns-icon social_link sns-kakao" title="카카오">
<img src="https://homzzang.com/img/head/social/kakao.png" alt="Kakao">
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F" class="sns-icon social_link sns-google" title="구글">
<img src="https://homzzang.com/img/head/social/google.png" alt="Google">
</a>
<script>
jQuery(function($){
$("#head_sns").on("click", "a.social_link", function(e){
e.preventDefault();
var pop_url = $(this).attr("href");
var newWin = window.open(
pop_url,
"social_sing_on",
"location=0,status=0,scrollbars=1,width=600,height=500"
);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');
return false;
});
});
</script>
</div>
</li>
<li><a href="https://homzzang.com/bbs/login.php?url=%2F" onclick="sidebar_open('sidebar-user'); return false;">로그인</a></li>
<li><a href="https://homzzang.com/bbs/register.php">회원가입</a></li>
<li><a href="https://homzzang.com/bbs/password_lost.php" class="win_password_lost">정보찾기 </a></li>
</ul>
에서 보시면
밑으로 빠지지 않게 하시려면
<li> 바로 아래에 있는
<div id="head_sns">
</div>
를
다른것으로 대치해보시는게 좋을듯 싶습니다.
<li>
<a></a>
</li>
구조로 된것과 다르게
<li>
<div>
<a></a>
</div>
</li>
형태로 되서 after 가 먹을 공간이 없는거 같네요
구성을 다르게 하시거나
<li><a>형태로 맞추시는게 좋을듯 싶네요
!-->여러 해결방법이 있겠지만
#head_sns 에 float:left 를 넣는것이 가장 편합니다
li display가 list-item인 상황에서 inline이나 inline-block의 요소들은 미묘한 여백을 가지게 되는데
#head_sns의 inline-block설정과 li:after 의 마진 사이에 미묘한 여백이 있게 되서
여백을 없애는 여러 방법중에 현 상황에서는 #head_sns 의 float를 조절 하는게 편하고
다른 방법으로는 li의 display를 table 계열로 조절할수도 있겠으나 다른 li들은 이런게 필요 없으니
큰 의미 없겠습니다
관심 갖고 답변주신 분들 모두 감사합니다.
덕분에 오늘 공부 제대로 했네요. ㅎ
원인은 li:after에 float:right 속성이 들어가서 그렇네요.
이 녀석이 들어가면 다른 요소가 인라인이나 인라인블럭 요소일지라도 float 가 안 들어갈 경우,
자체적으로 줄바꿈시키는 현상이 있더라구요.
또,
float가 붙으면 해당 요소와 그 안의 모든 요소의 기본 속성이 기본적으로 inline-block 속성화 되네요.