Html 没有 100% 宽度的显示块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12708381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display block without 100% width
提问by Staffan Estberg
I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?
我想使用 display 属性将 span 元素设置为显示在另一个元素下方。我尝试应用内联块但没有成功，并认为如果我以某种方式设法避免为元素提供 100% 的宽度（我不希望元素“伸展”），我可以使用块。可以这样做，或者如果不能，解决此类问题的好做法是什么？
Example: a news list where I want to set a "read more" link at the end of each post (note: <a>instead of <span>)
示例：我想在每篇文章末尾设置“阅读更多”链接的新闻列表（注意：<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>
Update: Solved. In CSS, apply
更新：已解决。在 CSS 中，应用
li {
clear: both;
}
li a {
display: block;
float: left;
clear: both;
}
采纳答案by PJ McCormick
If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:
如果我正确理解您的问题，以下 CSS 会将您的 a 浮动在跨度下方，并防止其具有 100% 宽度：
a {
display: block;
float: left;
clear: left;
}
回答by ha404
Use display: table.
使用display: table.
This answer must be at least 30 characters; I entered 20, so here's a few more.
此答案必须至少为 30 个字符；我输入了 20，所以这里还有一些。
回答by Mustafa J
you can use:
您可以使用：
width: max-content;
width: max-content;
Note: support is limited, check herefor a full breakdown of supporting browsers
注意：支持有限，请在此处查看支持浏览器的完整细分
回答by George
I would keep each row to its own div, so...
我会将每一行保留在自己的 div 中，所以...
<div class="row">
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">Content</div>
</div>
And then for the CSS:
然后对于 CSS：
.cell{display:inline-block}
It's hard to give you a solution without seeing your original code.
如果没有看到您的原始代码，很难为您提供解决方案。
回答by Renske
Again: an answer that might be a little bit too late (but for those who find this page for the answer anyways).
再说一遍：这个答案可能有点太晚了（但对于那些无论如何都能找到此页面的答案的人）。
Instead of
display:block;use display:inline-block;
而不是
display:block;使用display:inline-block;
回答by Roberto
Try this:
尝试这个：
li a {
width: 0px;
white-space:nowrap;
}
回答by Noob
I had this issue, I solved it like so:
我有这个问题，我是这样解决的：
.parent {
white-space: nowrap;
display: table;
}
.child {
display: block;
}
the "white-space: nowrap" makes sure that the children of the child(if it has any) don't wrap to new line if there is not enough space.
如果没有足够的空间，“空白：nowrap”确保孩子的孩子（如果有的话）不会换行到新行。
without "white-space: nowrap" :
没有“空白：nowrap”：
with "white-space: nowrap" :
使用“空白：nowrap”：
edit: it seems that it also just works without the child block part for me, so just this seems to work fine.
编辑：对于我来说，它似乎也可以在没有子块部分的情况下工作，所以这似乎工作正常。
.parent {
white-space: nowrap;
display: table;
}
回答by Jon Hudson
Can't you just set the span as display: blockand set a widthon the containing lielement?
你不能只设置 spandisplay: block并width在包含li元素上设置 a吗？
