html - 没有 100% 宽度的显示块

Question

我想使用 display 属性设置一个 span 元素出现在另一个元素下方。我尝试应用 inline-block 但没有成功，并认为如果我设法避免给元素提供 100% 的宽度（我不希望元素“伸展”），我可以使用 block。这可以做到吗，或者如果没有，解决这类问题的好的实践是什么？

示例：我想在每个帖子末尾设置“阅读更多”链接的新闻列表（注意：<a>而不是<span>）

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

更新：已解决。在 CSS 中，应用

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

score 176 · Accepted Answer

使用display: table.

此答案必须至少为 30 个字符；我输入了 20，所以这里还有一些。

score 78 · Accepted Answer

如果我正确理解您的问题，以下 CSS 会将您的 a 浮动到跨度下方并防止其具有 100% 的宽度：

a {
    display: block; 
    float: left; 
    clear: left; 
}

score 54 · Accepted Answer

您可以使用：

width: max-content;

注意：支持有限，请在此处查看支持浏览器的完整细分

score 8 · Accepted Answer

我会将每一行保留在自己的 div 中，所以...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

然后对于 CSS：

.cell{display:inline-block}

没有看到你的原始代码很难给你一个解决方案。

score 6 · Accepted Answer

再一次：一个可能有点太晚的答案（但对于那些找到这个页面的人来说）。

而不是 display:block;使用display:inline-block;

score 2 · Accepted Answer

2

试试这个：

li a {
    width: 0px;
    white-space:nowrap;
}

于 2014-05-27T15:46:27.860 回答

score 2 · Accepted Answer

我遇到了这个问题，我这样解决了：

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

“空白：nowrap”确保孩子的孩子（如果有的话）在没有足够空间的情况下不会换行。

没有“空白：nowrap”：

使用“空白：nowrap”：

编辑：对于我来说，它似乎也可以在没有子块部分的情况下工作，所以这似乎工作正常。

.parent {
  white-space: nowrap;
  display: table;
}

score 1 · Accepted Answer

1

您可以使用以下内容：

display: inline-block;

在链接和其他元素上效果很好。

于 2020-06-06T17:17:32.290 回答

8 回答 8