텍스트의 추가 간격이

이 HTML/CSS를 사용하여 목록의 텍스트를 표시 할 때 너비를 채우기 위해 추가로 여백이 적용됩니다. 어떻게 수정해야합니까?텍스트의 추가 간격이

HTML

<ul class = "text_quotes"> 
    <li class = "quote1"> “text text text text text text text text text text text text text...</li> 
    <li class = "quote2"> “text text text text text text text text text text text text text text text text...</li> 
    <li class = "quote3"> “text text text text text text text text text text text text text text text text...</li> 
    <li class = "quote4"> “text text text text text text text text text text text text text text text...</li> 
</ul>

CSS

.text_quotes li{ 
    display:inline block; 
    position: relative; 
    bottom: 10px; 
    text-align:justify; 
    font-size: smaller; 
    font-style:none; 
    margin-bottom: -100px; 
    margin-right: 100px; 
    float: center; 
    font-family: avenir; 
    min-width: 60px; 
    max-width: 100px; 
    list-style: none; 
    min-height: auto; 
    max-height: auto; 
}

편집 : 나는 다윗 내 오류를 수정하지만 단락에 크기를 적용 할 때 거기에 여전히 많은 단어처럼 공백을 추가 . 용서해주세요. 전에 HTML을 작성한 적이 없으며, C++, Python 및 C에서만 작업했습니다. 따라서 이것은 나에게 매우 새로운 것입니다.

출처

2013-12-11 user3093175

다른 소스 또는 기본 브라우저 스타일에서 더 많은 스타일을 적용했을 수 있습니다. 그것을 무시해야합니다. – DrCord

'ul.text_quotes {패딩 : 0}'? – Bigood

먼저 CSS의 모든 오류를 수정해야한다고 생각합니다. 'font-style : none'은 무효 ('normal'이어야합니다),'min-height : auto'는 무효입니다 ('0'이되어야합니다 :'inline-block')),'max-height : auto'는 유효하지 않습니다 ('none'이어야합니다). – davidpauljunior

난 당신이 그냥 텍스트를 왼쪽 정렬 할 매우 긍정적이다가, 그것을 정당화하지. 따라서 :

text-align:left;

출처

2013-12-12 01:20:28

감사합니다. 나는 바보 야. – user3093175

이것이 답 인 경우, 답변으로 upvote/select하십시오! –

나는 그것을 선택했지만, 내가 여기 새로 왔기 때문에 나는 투표 할 수 없다. – user3093175

이 문제는 display: inline-block 속성에 연결되어 있습니다. davidpauljunior으로 표시된 오류를 수정했다고 가정하고 위의 속성을 유지하려면 HTML 코드에서 공백을 모두 제거해야하므로 각 사이에 공백이 없어야합니다. 및 사이에 공백이 없어야합니다. 이 같은li 태그 : 당신은 인라인 블록 요소에 여분의 간격을 제거하는 몇 가지 옵션이

<ul class="text_quotes"> 
    <li class="quote1"> 
     “text text text text text text text text text text text text text... 
    </li><li class="quote2"> 
     “text text text text text text text text text text text text text text text text... 
    </li><li class="quote3"> 
     “text text text text text text text text text text text text text text text text... 
    </li><li class="quote4"> 
     “text text text text text text text text text text text text text text text... 
    </li> 
</ul>

출처

2013-12-12 00:08:35 matewka

...

옵션 1

,536,

HTML의 목록 항목 주위에있는 공백을 제거하십시오.

변경 :

<ul class="text_quotes"> 
    <li class="quote1">Text</li> 
    <li class="quote2">Text</li> 
    <li class="quote3">Text</li> 
    <li class="quote4">Text</li> 
</ul>

사람 :

<ul class="text_quotes"> 
    <li class="quote1"> 
     Text 
    </li><li class="quote2"> 
     Text 
    </li><li class="quote3"> 
     Text 
    </li><li class="quote4"> 
     Text 
    </li> 
</ul>

또는

가 ul에 font-size: 0;을 적용하고 lifont-size: 14px;에 글꼴 크기를 재설정합니다.

이 현상에 여기에 좋은 기사가있다 :

http://davidwalsh.name/remove-whitespace-inline-block

출처

2013-12-12 00:12:19 nickspiel

텍스트의 추가 간격이

답변

관련 문제