CSS - display : inline 속성을 사용하여 목록 메뉴에서 가로 간격을 제거하십시오.

저는 CSS를 처음 사용하고 있으며, 월말까지 & 내 웹 사이트를 CSS로 게시하는 학습 목표를 설정했습니다.CSS - display : inline 속성을 사용하여 목록 메뉴에서 가로 간격을 제거하십시오.

내 질문 : li (목록 사이에 내가 li (목록) 항목과 display: inline 속성을 사용할 때

내가 가져가 드롭 다운과 CSS 수평 메뉴를 구축하기 위해 노력하고있어,하지만, 내가 얻을 수평 공간) 항목을 표시합니다. 이 공간을 어떻게 제거합니까? 여기

는 HTML입니다 :

<div id="tabas_menu"> 
    <ul> 
     <li id="tabBut0" class="tabBut">Overview</li> 
     <li id="tabBut1" class="tabBut">Collar</li> 
     <li id="tabBut2" class="tabBut">Sleeves</li> 
     <li id="tabBut3" class="tabBut">Body</li> 
    </ul> 
</div>

그리고 여기에 CSS입니다 :

#tabas_menu { 
    position: absolute; 
    background: rgb(123,345,567); 
    top: 110px; 
    left: 200px; 
} 

ul#tabas_menu { 
    padding: 0; 
    margin: 0; 
} 

.tabBut { 
    display: inline; 
    white-space: 
    list-style: none; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); 
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); 
    font-family: helvetica, calibri, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 20px; 
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5); 
    -moz-border-radius: 0.3em; 
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    -webkit-border-radius: 0.3em; 
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    padding: 6px 18px; 
    border: 1px solid rgba(0,0,0,0.4); 
    margin: 0; 
}

나는 공간은 float: left/right 속성을 사용하여 제거 얻을 수 있지만 난을 달성 할 수없는 이유에 나를 괴롭히는 것 display 속성을 사용하는 것과 동일한 효과.

출처

2011-01-17 Kayote

'background' 선언을'background-image'로 변경할 수도 있습니다. 정확한 의도는 모르지만 속기 구문 분석은 구문이 다른 배경 특성을 덮어 쓰게합니다. http://jsfiddle.net/XVXyA/를 참조하십시오. http://jsfiddle.net/XVXyA/1/과 비교하십시오. –

나는 몇 주 전에 remarkably similar question을 가졌습니다.

가로 간격은 매우 적합합니다. 인라인 요소 사이에는 공백이 중요합니다. 이 내용은 다음과 같은 렌더링 된 경우

<b>Label:</b> <span>content</span>

당신이 좌절 느끼지 않을 것이다 : 당신은 일반적인 스타일에서 다음과 같은 마크 업을 고려할 때 이것은 완벽한 의미가?

레이블 : 내용

HTML 공백의 역할에 대해 잊고 우리를 전리품으로 블록 요소의 유병률. 그러나 인라인 요소 (인라인 블록 요소 포함)를 사용할 때마다 HTML이 근본적으로 마크 업이고 코딩 언어가 아니기 때문에 마크 업의 공백이 실제로 중요하다는 점을 기억해야합니다.

당신의 문제에 대한 몇 가지 해결책이 있습니다. (HTML의 공백을 두지 않으려 고한다면, 심미적 이유로 —이 중요하지 않다면 그냥 공백을 제거하고 완료하십시오.) 가장 쉬운 방법은 다음과 같습니다. font-size: 0px을 상위 컨테이너에 적용한 다음 글꼴 크기를 font-size: 16px 또는 각 인라인 요소에있는 글꼴 크기로 복원하십시오. 이렇게하면 텍스트 노드 사이의 글꼴 크기가 0이됩니다.

출처

2011-01-17 18:00:17

감사합니다 스티븐. 나는 폰트 사이즈 트릭을 좋아한다. 그것으로 놀 것입니다. 도움을 청합니다. – Kayote

글자 크기 트릭이 좋다. 그리고 공간을 원하지 않는 시대가 많이 있습니다. 예 : 서로 옆에있는 경계 메뉴 단추. –

글꼴 크기가 유용한 유용한 트릭을 주셔서 감사합니다 : 0! – Heihachi

일부 브라우저는 목록 항목 사이에 공백을 렌더링합니다. 예를 들어 :

<li>item 1</li> 
<li>item 2</li>

은 첫 번째 줄에 </li> 후 다음 행에 <li> 전에 줄 바꿈 (그리고 아마도 일부 탭)이있다. 일부 웹 브라우저는이를 공간으로 렌더링합니다. 두 가지 해결 방법이 있습니다.

<ul> 
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li> 
</ul>

이 추한 솔루션의 일종이지만, 그것은 작동합니다

하나는과 같이, 모든 공백을 제거하는 것입니다.

다른 가능성은 귀하가 직접 언급 한 내용입니다. float: left을 사용하십시오. 개인적으로 나는 항상 플로트 솔루션을 사용합니다.

출처

2011-01-17 17:57:50

float:left을 사용하면 브라우저의 레이아웃 계산이 복잡해집니다. 렌더링 속도와 효율성에 신경 쓰면 <li> 사이의 모든 공백을 제거하십시오.

출처

2012-03-05 08:22:21 anon

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>tw`enter code here`o</li> 
    <li>three</li> 
</ul> 
</body> 
</html>

출처

2013-01-30 06:30:41 user2024227

CSS - display : inline 속성을 사용하여 목록 메뉴에서 가로 간격을 제거하십시오.

답변

관련 문제