我怎樣才能消除兩個並排的asp.net標籤控件之間的差距？

我使用兩個ASP.net標籤控件構建一個進度條。左邊的標籤有綠色背景，右邊的標籤有紅色。他們的總長度是100px。因此，如果您的進度是75％，綠色標籤將長75px，紅色標籤長25px。我怎樣才能消除兩個並排的asp.net標籤控件之間的差距？

但有這樣的兩個控件之間的明顯差距：

GGGGGGG RRR

，我希望它看起來像這樣：

GGGGGGGRRR

假裝「G」=綠色，「R」=紅色。

我嘗試使用的CSS與此，但它沒有工作：

.pbar { 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    border: none; 
}

來源

2016-10-17 Roto

你能用一個[JSfiddle]（https://jsfiddle.net/）來說明你的問題嗎？ –

假設你有兩個標籤：

<label class='green'>GGGGGGGGGG</label> 
<label class='red'>RRRRRRRRRR</label>

以下CSS將有你要找的效果：

label { 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
.green{ 
    background-color:green; 
} 
.red{ 
    background-color:red; 
}

工作小提琴：https://jsfiddle.net/bz1znu4v/2/

來源

2016-10-17 12:57:47 Ted

我應該提到他們是asp.net標籤控件。這可能沒有關係。我現在正在嘗試你的例子。 – Roto

@Roto - 由於'asp：label'可能會被轉換爲'span'，所以會出現頁面的源代碼。 – Ted

我添加了float：left到我的css，它完美的工作，非常感謝。 – Roto

只需將兩個項目的標籤在同一直線上，消除它們之間的空間。查找例如：

.pbar { 
 
    padding: 0px 0px 0px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
    border: none; 
 
}

<label class="pbar">label 1</label><label class="pbar">label 2</label> 
 
<hr> 
 
<div> 
 
    <label class="pbar">label 3</label> 
 
    <label class="pbar">label 4</label> 
 
</div>

來源

2016-10-17 12:28:04

1st。問題是關於標籤，而不是跨度。第2位。如果有像以下這樣的CSS類，你的「解決方案」將不起作用：'span {margin：5px; } – Ted

正確的第一點，但我的答案無論如何工作，如果你使用跨度或標籤。我錯誤地做了跨度的第一個例子，但我會糾正它。但我沒有說明你的觀點2，如果他試圖避開空間，爲什麼要放一點保證金？ –

我應該提到他們是asp.net標籤控件。這可能沒有關係。我現在正在嘗試你的例子。 – Roto

我怎樣才能消除兩個並排的asp.net標籤控件之間的差距？

回答

相關問題