文本中額外的間距html

當我使用此HTML/CSS顯示列表中的文本時正在應用填充寬度的額外空間位，我該如何解決這個問題？文本中額外的間距html

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 {padding：0}'？ – Bigood

我認爲你需要首先解決你的CSS中的所有錯誤。 'display：inline block'無效（應該是'inline-block'），'font-style：none'無效（應該是'normal'），'min-height：auto'無效（應該是'0' ），'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

你有幾個選項，以消除inline-block的元素額外的間距......

選項1

刪除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>

或者

應用font-size: 0;到ul和復位的lifont-size: 14px;的字體大小。

這裏有一個偉大的文章對這一現象：

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

來源

2013-12-12 00:12:19 nickspiel

文本中額外的間距html

回答

相關問題