当javascript改变两个标签的宽度时，它们会自动改变位置

我在锚点标签中有标签：

<a href="#" runat="server" id="Anchor" class="class1"><span><asp:label ID="label1"   runat="server" ForeColor="White" Font-Size="Smaller" Text=text1" >

以及包含用户名的CCD_ 1。我想要的是当label2根据用户名调整其宽度时，label1根据label1自动调整其位置。在这里，当用户名类似于"ttttttttttltttttttt"时，我遇到了一个问题——在label1对齐之后，但当用户名较小，如"ttttt"时，标签之间会显示很大的空间。

 .class1 
    {
    position: absolute;
    z-index: 4;
    top: 65px;
    right: 43.3%;
    /*left: 30.6%;*/
    -webkit-tap-highlight-color: transparent;
     }
     body.reversed .class1 {
        left: 8px;
        right: auto;
    }
    .fixed-title-bar > .class1 {
        position: fixed;
    }
    .class1 > span {
        padding: 0 8px 0 30px;
        background: url(../img/inout5.png) no-repeat 7px center;
        font-size: 16px;
        height: 27px;
        line-height: 27px;
    }
    .class1 > span {
        display: block;
        border: 1px solid #020203;
        color: white;
        -webkit-text-shadow: 0 -1px 0 black;
        -moz-text-shadow: 0 -1px 0 black;
        text-shadow: 0 -1px 0 black;
        background-color: #454545;
        background-color: rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
        -webkit-background-clip: padding-box;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width:56px;
    }