Roto Roto - 1 month ago 6
ASP.NET (C#) Question

How can I remove the gap between two side by side asp.net label controls?

I build a progress bar using two ASP.net label controls. The label on the left has a green background and the label on the right has a red. Their total length is 100px. So if your progress is 75% the green label will be 75px long and the red label will be 25px long.

But there is a visible gap between the two controls like this:


GGGGGGG RRR


and I want it to look like this:


GGGGGGGRRR


Pretend "G" = green and "R" = red.

I tried using css with this but it did not work:

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

Ted Ted
Answer

suppose you have two labels:

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

the following css will have the effect you are looking for:

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

working fiddle: https://jsfiddle.net/bz1znu4v/2/