Question

我使用两个ASP.net标签控件构建一个进度条。左侧的标签为绿色背景，右侧的标签为红色。它们的总长度是100px。因此，如果您的进度为75％，则绿色标签长度为75px，红色标签长度为25px。

但是这两个控件之间存在明显的差距：

GGGGGGG RRR

我希望它看起来像这样：

GGGGGGGRRR

假装“G”=绿色，“R”=红色。

我尝试使用css但它不起作用：

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

Answer 1

假设您有两个标签：

<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/

Answer 2

只需将两个项目的标签放在同一行中，删除它们之间的空格即可。寻找例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何消除两个并排的asp.net标签控件之间的差距？

2 个答案: