没有 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;
}

Answer 1

使用

display: table

在你的 CSS 代码中。

Answer 2

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

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

Answer 3

您可以使用：

width: max-content;

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

Answer 4

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

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

然后是CSS：

.cell{display:inline-block}

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

Answer 5

再次：这个答案可能有点太晚了（但对于那些无论如何都找到此页面寻找答案的人来说）。

代替

display:block;

使用

display:inline-block;

Answer 6

试试这个：

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

Answer 7

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

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

.child {
  display: block;
}

“white-space: nowrap”确保如果没有足够的空间，子级的子级（如果有的话）不会换行。

没有“空白：nowrap”：

与“空白：nowrap”：

---

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

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

Answer 8

您可以使用以下内容：

display: inline-block;

适用于链接和其他元素。

Answer 9

我用这个：

垂直对齐：顶部； //做这个技巧

a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco); 
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;

}