沒有100％寬度的顯示塊

我想使用display屬性將span元素設置爲顯示在另一個元素下面。我嘗試應用內聯塊但沒有成功，並認爲我可以使用塊，如果我以某種方式設法避免給元素100％的寬度（我不希望元素「伸出」）。這可以做到，或者如果沒有，解決這類問題有什麼好的實踐？沒有100％寬度的顯示塊

例子：一個新聞列表，我想成立一個在每個帖子的末尾「更多」鏈接（注：<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; 
}

你有任何標記（HTML或CSS）向我們展示？沒有任何實際工作就很難解決問題。另外[jsfiddle]（http://jsfiddle.net）上的演示將會很好。 –

以爲我不需要任何示例代碼，因爲它只是定位一個span元素。查看更新的帖子。 –

如下所述，您只需使用一行代碼就可以嚴格降低所有標記。 – ha404

如果我正確理解你的問題，以下CSS將浮在跨度下方的一個，並保持它由具有100％的寬度：

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

2012-10-03 12:57:25

我試着應用這個，但由於跨度元素（標題和日期，在這個例子中）沒有浮動鏈接在最後一個跨度之前被定位。猜測一種解決方案是讓li中的所有子元素都浮動。 –

這適用於如果我爲li父級應用clearfix。將與此解決方案，謝謝PJ。 –

沒問題，樂於幫忙！ –

我會保持各行自身的DIV，所以......

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

然後對CSS：

.cell{display:inline-block}

很難給你沒有看到您的原始代碼的解決方案。

2012-10-03 12:29:10 George

謝謝，但我不想混入任何div元素。 –

不錯的解決方案！應該有更多upvotes ... – Levit

不能你剛纔設置的跨度display: block並在li元素上設置width？

2012-10-03 13:11:07

由於標題和日期跨度，li需要具有自動寬度。 –

再說一遍：可能有點太晚了（但對於那些找到答案的人來說）。

代替 display:block;使用display:inline-block;

2013-11-01 06:30:06 Renske

試試這個：

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

2014-05-27 15:46:27 Roberto

100

使用display: table。

此答案必須至少有30個字符;我進入了20，所以這裏還有一些。

2014-10-15 17:47:40 ha404

效果很好，謝謝 –

天才解決方案。 'margin：0 auto;'如果你需要它居中。 – Mafia

我覺得你太棒了。 – billynoah

你可以使用：

width: max-content;

注：支持是有限的，check here支持的瀏覽器的全面崩潰

2017-09-13 13:46:00

回答