탭 메뉴에서 원하지 않는 공백을 제거하는 방법은 무엇입니까?

Question

asp.net mvc를 사용하고 있으며 각 탭 사이에 원하지 않는 공백을 표시하는 탭 메뉴로 작업 중입니다. 이것은 하나의 이미지를 가지고있는 것과는 반대로 각 이미지 태그가 자체 라인에있을 때만 발생합니다.

 <img src="/Content/Images/Reports_white.png"/> 
     <img src="/Content/Images/Audit_white.png"/> 
     <img src="/Content/Images/Messages_white.png"/> 
     <img src="/Content/Images/Admin_white.png"/> 

화상의 아래쪽에서 원하는 효과 비교 :

 <img src="/Content/Images/Reports_white.png"/><img src="/Content/Images/Audit_white.png"/> ... 

상부 이미지

은 불필요한 공간의 원인이 무엇이고 자신의 라인에있는

이 공간을 모두 한 줄로 유지하지 않고도이 공간을 없애려면 어떻게해야합니까?

Answer 1

나는이 같은 순서없는 목록에서 탭 이미지를 포함 할 것 :

CSS :

ul.tabs 
{ 
list-style:none; 
padding:0px; 
margin:0px; 
} 

ul.tabs li 
{ 
padding:0px; 
margin:0px; 
float:left; 
} 

HTML :

<ul class="tabs"> 
<li><img src="/Content/Images/Reports_white.png"/></li> 
<li><img src="/Content/Images/Audit_white.png"/></li> 
<li><img src="/Content/Images/Messages_white.png"/></li> 
<li><img src="/Content/Images/Admin_white.png"/></li> 
</ul> 

당신이 패딩을 사용하여 간격을 제어 할 수 있습니다 그 방법이나 여유.

Answer 2

한 기술은 당신이 이미지 주위 예를 들어 일부 요소를 DIV 추가해야합니다 클릭 할 수있는 탭을 아마 원하는 것이기 때문에

<img src="/Content/Images/Reports_white.png" 
    /><img src="/Content/Images/Audit_white.png" 
    /><img src="/Content/Images/Messages_white.png" 
    /><img src="/Content/Images/Admin_white.png"/> 

Answer 3

을하는 것입니다. 이러한 요소에 여백이 없어야하고 소스의 div에 아무런 문제가없는 공백을 둘 수 있습니다.

<div><img src="/Content/Images/Reports_white.png"/></div> 
    <div><img src="/Content/Images/Audit_white.png"/></div> 
    <div><img src="/Content/Images/Messages_white.png"/></div> 
    <div><img src="/Content/Images/Admin_white.png"/></div> 

Answer 4

태그 사이에 공백이 있습니다. 새로운 행은 공백으로 해석됩니다. 이것은 실제로 인라인 요소에만 영향을 미치며, < img> 요소는 문제가됩니다.

간격을 두지 않고 가로로 쌓을 요소에 float: left을 추가 할 수도 있습니다. 실제 하이퍼 링크로 구현하고있는 것으로 가정하면 정확한 해결책을 제안하기 위해 정확한 마크 업을 찾아야합니다.

Answer 5

짧은 답변 : img 태그 사이의 공백을 제거하고 여백이 없는지 확인하십시오.

HTML에 공백을 넣지 않으려면 div (overflow:hidden의 높이가 정확함)에 포함 된 float:left으로 시간을 가져야합니다.