Css ASP.NET文本框列表未正确对齐

我在ASP.NET主/内容网页的图像顶部显示一个文本框列表。图像是页面的宽度，有6个均匀间隔的白色块。我想做的是使用下面的CSS和HTML在每个图像框的空白处添加一个数字。所发生的事情是所有的文本框都显示在同一个图像框中，这是第一个。在第一种情况下，文本框之间的间距仅为2px，而不是像左边CSS标记所定义的那样在图像中以20px的间距分布。为什么我的风格不正确

Master:

//这些样式表类与下面的每个文本框匹配

        <style>
        .floating_label1 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 115px;**
          //  border: hidden;
        }
        .floating_label2 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 130px;**
          //  border: hidden;
        }
        .floating_label3 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 150px;**
        //    border: hidden;
        }
        .floating_label4 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 170px;**
         //   border: hidden;
        }
        .floating_label5 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 190px;**
        //    border: hidden;
        }
        .floating_label6 {
            position: absolute;
            z-index: 200;
            top: 65px;
            **left: 210px;**
            border: hidden;
        }
}
    </style>

1.浮动标签1{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：115px**
//边界：隐藏；
}
.浮动式标签2{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：130像素**
//边界：隐藏；
}
.浮动标签3{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：150px**
//边界：隐藏；
}
.浮动式标签4{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：170px**
//边界：隐藏；
}
.浮动式标签5{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：190px**
//边界：隐藏；
}
.浮动式标签6{
位置：绝对位置；
z指数：200；
顶部：65px；
**左：210像素**
边界：隐藏；
}
}

内容：

  <div style="position:relative;">
           <img src="Images/PAXSummary.jpg" />
           <asp:TextBox ID="TextBox1" runat="server" Text="1" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label1" /> 
           <asp:TextBox ID="TextBox2" runat="server" Text="2" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label2" />             
           <asp:TextBox ID="TextBox3" runat="server" Text="3" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label3" />             
           <asp:TextBox ID="TextBox4" runat="server" Text="4" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label4" />             
           <asp:TextBox ID="TextBox5" runat="server" Text="5" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label5" />             
           <asp:TextBox ID="TextBox6" runat="server" Text="6" style="height:25px; width:25px; vertical-align:central; text-align:center" CssClass="floating_label6" />             
         </div>

---

我认为问题在于您必须考虑每个框元素的宽度，因为关于“左”的所有内容都是从左边缘计算的。第一个长方体的左边缘为130像素，然后该长方体继续运行25个像素，以155像素结束。框2的左边缘设置为150px，将接触框1的右侧。如果您希望每个像素之间有20像素，那么“left”的值应该相差25+20，而不是20。所以130、175、220等等。我认为问题是你必须考虑每个框元素的宽度，因为所有关于“左”的东西都是从左边缘计算出来的。第一个长方体的左边缘为130像素，然后该长方体继续运行25个像素，以155像素结束。框2的左边缘设置为150px，将接触框1的右侧。如果您希望每个像素之间有20像素，那么“left”的值应该相差25+20，而不是20。然后是130，然后是175，然后是220，等等