如何設置CSS中內聯元素之間的空白大小？

我正在創建一個MVC 1.0表單以用於多個視圖。我有一些元素需要在同一行顯示，並且我通過將樣式設置爲「display：inline」來完成此操作。我還在CSS中添加了margin-left設置，以強制內聯元素之間的差距，但似乎沒有設置。如何設置CSS中內聯元素之間的空白大小？

我的CSS有：

字段集label.inline { 顯示：內聯; margin-left：2em; }

視圖代碼是：

<fieldset> 
    <legend>Details</legend> 
    <p> 
     <label for="StartTime">Start Time:</label> 
     <%= Html.TextBox("StartTime", Model.StartTime.ToShortTimeString())%> 
     <label for="NextDay" class="inline">Next Day?</label> 
     <%= Html.CheckBox("NextDay") %> 
     <%= Html.ValidationMessage("StartTime", "*")%> 
    </p> 
</fieldset>

設置大小中的「利潤率左」的風格對開始時間控制和NextDay標籤之間的空間沒有任何影響。我怎樣才能在元素之間創造這種差距？

來源

2010-03-01 Val M

您能向我們展示輸出到瀏覽器的實際HTML嗎？ – GateKiller 2010-03-01 14:09:04

重新標記爲CSS。這是一個MVC視圖與這個與HTML和CSS嚴格相關的問題無關。 – 2010-03-01 14:10:52

我現在已將樣式表中的「margin-left：2em」設置更改爲「padding-left：4em」，並且在NextDay標籤之前仍未看到間隙。的HTML輸出是：

<標籤= 「開始時間」>開始時間： <輸入的ID = 「開始時間」名稱= 「開始時間」類型= 「文本」的值= 「00:00」/> 第二天？ <輸入的ID = 「NextDay」名稱= 「NextDay」類型= 「複選框」值= 「真」/><輸入名稱= 「NextDay」類型= 「隱藏」值= 「假」/>

這在IE7中。 – 2010-03-01 14:25:31

你在測試什麼瀏覽器？

如果您使用Firefox，請使用Firebug擴展名。使用指針工具選擇一個元素，然後使用「佈局」選項卡查看框模型。這將顯示正在應用的填充，邊框和邊距。如果您發佈正在生成的HTML和正在計算的框模型屬性，您可能會得到更好的答案。

來源

2010-03-01 14:13:11

正在應用的樣式（如Firebug中所示）是： fieldset label.inline { display：inline; padding-left：4em; } 如我所料。的HTML是：

它在IE中沒有顯示爲右對齊。它在Firefox中。 – 2010-03-01 15:35:48

「邊距」樣式適用於內聯元素。您可以使用「inline-block」顯示模式：

fieldset label.inline { display: inline-block; margin-left: 2em; }

來源

2010-03-01 14:14:14 Tomas

內聯框不是CSS屬性。你可能是指內聯塊。儘管有一個特定於Firefox的-moz-inline-box。 – easwee 2010-03-01 14:18:49

我現在試過 fieldset label.inline display：inline-block; margin-left：4em; padding-left：4em; } 但仍然沒有成功。 – 2010-03-01 14:32:59

使用display：inline-block;

來源

2010-04-03 02:43:37 chopsticks

如何設置CSS中內聯元素之間的空白大小？

回答

相關問題