Question

使用此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;
}

编辑：我修正了我的错误David，但是当你将一个尺寸应用于一个段落时，仍然会添加类似于单词的空格。请原谅我以前从未写过HTML，我只使用过C ++，Python和C.所以这对我来说很新鲜。

Answer 1

您有几个选项可以删除内联块元素的额外间距...

选项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并重置li font-size: 14px;上的字体大小。

这里有一篇很棒的文章：

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

Answer 2

问题与display: inline-block属性有关。假设您更正了 davidpauljunior 提到的错误，如果要保留上述属性，则必须从HTML代码中删除所有空格，因此每个空格之间不应有空格< em>关闭和打开 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>

Answer 3

我非常肯定你只想左对齐你的文字，而不是证明它是正确的。所以：

text-align:left;

文本html中的额外间距

3 个答案: