爲什麼`p`追加到新行，雖然`display-inline`？

我有這個簡單的HTML標記：爲什麼`p`追加到新行，雖然`display-inline`？

<div class="autocomplete-suggestion" data-index="0"> 
    Daddy, Yankee 
    <p class="zumba"> 
     1996-03-14 
    </p> 
</div> 
.....

所以我的目標是讓與class="zumba"像文本Daddy, Yankee在同一行，但正確的網站上：

我加float-right對齊它是一個正確的網站，什麼解決。但不知何故，它顯示在一個新的行！

然後我說：

.zumba {float:right; display:inline}

但問題保持！爲什麼？謝謝，在這裏你可以測試你的想法： http://jsfiddle.net/kMuA6/

來源

2013-11-28 John Smith

你試過給寬度嗎？ – Kuzgun

我儘量避免這個！因爲我希望它有100％ –

浮動元素總是讓他們顯示：塊，不管你定義什麼。（檢查螢火蟲或任何其他開發人員工具的顯示值）您是否可以控制標記？然後將「Daddy，Yankee」文本包裹在一個額外的元素中，並讓它向左浮動。

來源

2013-11-28 14:01:38

你會用什麼元素包裝「爸爸揚基」？謝謝 –

跨度可能，因爲你只是需要它應用它的樣式 –

「浮動元素總是讓他們顯示：塊」。幾乎，但不完全。 'display：inline-table;'變成'display：table' - 'display：list-item'停留'display：list-item'。有關詳細信息，請參閱http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo。 – Alohci

他們有頂部和底部邊緣。這工作：

.zumba {float:right; display:inline; margin:0;}

來源

2013-11-28 13:59:44 Kuzgun

是的，或者只是用''代替。 –

不會爲我改變任何東西... –

變化YOUT 到span

HTML

<div class="autocomplete-suggestion" data-index="0"> 
    Daddy, Yankee <span class="zumba"> 1996-03-14 </span> 
</div>

CSS

.zumba {float:right;}

小提琴：http://jsfiddle.net/logintomyk/drLbx/

一般提示：如果它沒有太大的文字，始終是一個更好的選擇，在同一直線上（和不同的風格），以顯示！ :)

來源

2013-11-28 14:00:08 NoobEditor

+1。這是正確的路！ – tjons

對不起，但在我的投影中它不起作用！ –

你需要刪除你的空白區域：nowrap;那麼它的工作原理 –

試試這個小提琴：

http://jsfiddle.net/kMuA6/1/

我只是用代替

來源

2013-11-28 14:00:49 Zword

你能做到這一點whitout使用任何浮動。

它將與和<工作SPAN>。

<div class="autocomplete-suggestion" data-index="0"> 
    Daddy, Yankee 
    <span class="zumba"> 
     1996-03-14 
    </span> 
</div>

我添加了一些顏色來識別。

小提琴：http://jsfiddle.net/kMuA6/2/

來源

2013-11-28 14:07:58 Tiago

爲什麼`p`追加到新行，雖然`display-inline`？

回答

相關問題