如何在CSS中的DIV後刪除換行符

是否有辦法在使用css的div後防止換行符，但要有一個div分鐘寬度和另一個最大寬度？如何在CSS中的DIV後刪除換行符

比如我有

<div class="label">My Label:</div> 
<div class="text">My text</div>

，並希望它顯示，如：

My Label: My text

如果我的文字浮動的權利，我的標籤通吃剩餘寬度是多少？

我使用了下面的CSS，但股利的.text保持包裝：

div 
{ 
    display: inline-block; 
} 

.label { 
    border:1px solid blue; 
    width:100%; 
} 

.text { 
    border:1px solid red; 
float:right; 
}

** UPDATE：JS FIDDLE *http://jsfiddle.net/jPrMG/

感謝您的幫助

來源

2013-07-31 alias51

您需要將它們從被'block'元素'直列block'元素，像這樣http://jsfiddle.net改變/ E537f/ – user1477388

如何將.label div設置爲所有屏幕寬度，而.text div被右移？ – alias51

是否這樣？ http://jsfiddle.net/E537f/3/ – user1477388

您可以使用CSS表格模型：

.label { 
    border:1px solid blue; 
    display: table-cell; 
    width: 100%; 
} 

.text { 
    border:1px solid red; 
    display: table-cell; 
    white-space: nowrap; 
}

Fiddle

來源

2013-07-31 14:50:25

這不是你看到的'換行';這是因爲<div>元素默認爲block元素。

如果你想使他們出現在同一行去改變，你可以在CSS改變display屬性，像這樣：

display:inline;

或

display:inline-block;

如果仍想要width或min-width屬性（如問題中所述），那麼你需要這兩個後者，inline-block。

希望有所幫助。

來源

2013-07-31 14:37:31 Spudley

它確實，但它不能解決我所面臨的包裝問題。看到這裏：http://jsfiddle.net/jPrMG/ – alias51

@ alias51 - 在小提琴中，只需從標籤中刪除'width：100％'。就目前而言，它將標籤的整個寬度擴展到整個屏幕上，所以當然下一個元素向下移動到下一行。 – Spudley

或者你可以對標籤和字段使用'float：left'和'float：right'。 – Spudley

如何在CSS中的DIV後刪除換行符

回答

相關問題