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

Question

我在 anchor 标签中有标签:

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

和一个包含用户名的label2。我想要的是当 label2 根据用户名调整其宽度，然后 label1 自动根据 label1 调整其位置。在这里，当用户名类似于“tttttttttttttttttttttttttttttttttt”时，我遇到了一个问题——在此 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;

    }

Answer 1

通过一些 CSS 设置和 ul li 标签发出reslove