javascript - 如何从右向左过渡宽度而不是默认从左向右过渡？

Question

仍在处理我之前发布过几次的该死的 UI。我现在几乎已经通过工作转换等完成了它，但是我正在努力处理左侧容器。

正确的容器(麦克风图标)正是我想要的样子。麦克风与肖像齐平，将鼠标悬停在麦克风上以激活过渡(我确实希望这是一个按键 [M]，但这是另一个障碍)，麦克风图标/背景和容器滑出可见。

我尝试将同样的过渡应用到左侧容器，认为这将是宽度从右到左过渡而不是默认的从左到右过渡的简单解决方案。

谁能帮我解决这个问题？我见过有人使用蒙版并在宽度变化时从左向右滑动蒙版，但我不确定将此 UI 放入游戏时效果如何。

此外，如果有人可以帮助我使用按键 JS 那将是一个巨大的好处，因为我几乎没有用它。 (我希望右侧容器在按键 [M] 上激活，左侧容器在按键 [K] 上激活。

提前致谢。

.positive {
    color: rgb(114, 204, 114);
}

.negative {
    color: rgb(224, 50, 50);
}

.tempbg {
    background: linear-gradient(#e66465, #9198e5);
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
}

.masscont {
    background-color: rgba(0, 0, 0, 0);
    position: sticky;
    top: 50px;
    left: 552px;
    width: 260px;
    height: 85px;
    z-index: 1;
}

.portrait {
    background-image: url("https://gdurl.com/VKq8");
    position: fixed;
    top: 34px;
    left: 360px;
    width: 120px;
    height: 120px;
    border-radius: 110px;
    z-index: 3;
    display: block;
    opacity: 1;
}

.container {
    background-color: rgba(0, 0, 0, .237);
    position: absolute;
    top: 45px;
    left: -95px;
    width: 0px;
    height: 85px;
    border-radius: 50px;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
    z-index: 1;
    opacity: 1;
    display: block;
    transition: width 1.2s cubic-bezier(0.24, 0.26, 0.63, 0.93);
}

.container:hover {
    width: 260px;
}

/*#heal, #armor, #hunger, #thirst, #stamina, #voice {
    
}*/

#boxHeal, #boxArmor, #boxStamina, #boxHunger, #boxThirst, #boxVoice {
    width: 100%;
    height: 100%;
    transition: 0.2s ease-in-out;
}

#heal {
    position: absolute;
    left: 26px;
    bottom: 70px;
    width: 0px;
    height: 10px;
    padding: 0;
    float:left;
    transition: width 1s ease-in-out;
}

.container:hover #heal{
    width: 140px;
}

.container:hover #armor{
    width: 140px;
}

#armor {
    position: absolute;
    left: 27px;
    bottom: 54px;
    width: 0px;
    height: 10px;
    transition: width 1s ease-in-out;
}

#hunger {
    position: absolute;
    left: 62px;
    bottom: 28px;
    width: 0px;
    height: 10px;
    transition: width 1s ease-in-out;
}

.container:hover #hunger{
    width: 113px;
}

.iconhunger {
    position: relative;
    left: -40px;
    bottom: 10px;
    z-index: 3;
    align-content: left;
 }

#thirst {
    position: absolute;
    left: 22px;
    bottom: 54px;
    width: 0px;
    height: 10px;
    padding: 0;
    float:left;
    transition: width 1s ease-in-out;
}

.container:hover #thirst{
    width: 113px;
}

.iconthirst {
    position: relative;
    left: 0.5px;
    bottom: -29.5px;
    z-index: 3;
    align-content: left;
 }

#stamina {
    position: absolute;
    left: 62.5px;
    bottom: 1px;
    width: 0px;
    height: 10px;
    padding: 0;
    float:left;
    transition: width 1s ease-in-out;
}

.container:hover #stamina{
    width: 113px;
}

.iconstamina {
    position: absolute;
    z-index: 3;
    align-content: left;
    left: -36px;
    bottom: -3px;
 }

#voice {
    position: absolute;
    left: 200px;
    bottom: -00px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.fa-microphone {
    position: absolute;
    z-index: 3;
    left: 69px;
    bottom: 25px;
    color: #525151;
    font-size: 38px;
 }

.fa-microphonebg {
    position: absolute;
    top: -75px;
    left: -90px;
    width: 121px;
    height: 85px;
    background-image:
		radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);
		border-top-right-radius: 40px;
		border-bottom-right-radius: 40px;
    z-index: 3;
    transition: left 1s ease-in-out;
}

.masscont:hover #fa-microphonebg {
    left: 80px;
}

#boxHeal {
    background: rgba(97, 191, 92, 1);
    border: solid 0.3px rgb(97, 191, 92);
    border-radius: 30px;
}

#boxArmor {
    background: rgb(96, 136, 220);
    border: solid 0.3px rgb(96, 136, 220);
    border-radius: 180px;
    border: -5px;
}

#boxHunger {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 7px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxThirst {
    background:rgb(255, 255, 255);
    position: absolute;
    left: 30px;
    bottom: -34px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxStamina {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 4px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice {
    background: rgb(180, 180, 180);
    position: absolute;
    z-index: 4;
    height: 27px;
    width: 14.2px;
    left: 6.2px;
    bottom: 11px;
    border-radius: 30px;
}

#boxVoice.active {
    background: rgb(46, 196, 66);
}

.position {
    font-family: "gta-ui", Verdana, Tahoma;
    font-size: 30px;
    position: absolute;
    bottom: 0.35%;
    left: 16%;
    text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000;
    color: #ffffff;
}

.seperator {
    color: rgb(224, 50, 50);
}

.seperator2 {
    color: rgb(240, 200, 80);
}

.walletcont {
    background-color: rgba(0, 0, 0, 0.288);
    position: absolute;
    z-index: 2;
    top: 50px;
    left: 120px;
    width: 260px;
    height: 85px;
    border-radius: 50px;
    border-bottom-right-radius: 0%;
    border-top-right-radius: 0%;
    transition: width 1.5s ease-in-out;
}

.walletcont:hover{
    width: 0px;
}

.fa-wallet {
    position: absolute;
    z-index: 3;
    left: 20px;
    bottom: 25px;
    color: #525151;
    font-size: 38px;
 }

.walletbg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 121px;
    height: 85px;
    background-image:
		radial-gradient(circle at 100% 50%, rgba(0,0,0,0) 50px, #fff 51px);
		border-top-left-radius: 40px;
		border-bottom-left-radius: 40px;
    z-index: 0;
    transition: left 1.5s ease-in-out;
}

.walletcont:hover #walletbackg {
    left: 170px;
}

.fa-pound-sign {
    position: absolute;
    z-index: 3;
    left: 100px;
    bottom: 60px;
    color: #ffffff;
    font-size: 18px;
}

.fa-piggy-bank {
    position: absolute;
    z-index: 3;
    left: 96px;
    bottom: 35px;
    color: #ffffff;
    font-size: 16px;
}

.blackmoneyic {
    position: absolute;
    left: 99px;
    bottom: 7px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
        <title>SoL RP UI</title>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
        <script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
    </head>
    <body class="tempbg">
            <div class="portrait">
                </div>
            <div class="walletcont">
                    <i class="fas fa-pound-sign"></i>
                    <i class="fas fa-piggy-bank"></i>
<svg class="blackmoneyic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px" y="0px" viewBox="0 0 59.997 59.997" style="fill:#ffffff" xml:space="preserve" width="18px" height="18px"><g><g>
	<path d="M49.031,32.997c-0.669,0-1.338,0.04-1.998,0.111c-1.362-2.82-3.366-5.301-5.864-7.214l-7.202-4.894   c-1.191-0.914-3.068-2.002-5.246-2.002h-7.777c-1.924,0-3.816,0.655-5.3,1.822l-7.078,5.156c-7.377,5.8-9.712,15.964-5.551,24.168   c2.002,3.947,4.666,6.227,7.501,6.418c0.271,0.018,0.545,0.028,0.821,0.028h19.154c1.449,2.057,3.838,3.407,6.54,3.407   c1.409,0,2.731-0.369,3.882-1.011c1.739,0.633,4.76,1.011,8.118,1.011c9.271,0,9.998-2.22,10-2.903v-4v-0.001v-3.999v-0.001v-3.999   v-0.001v-3.999v-0.001v-4C59.031,35.064,53.984,32.997,49.031,32.997z M22.031,27.997c-5.271,0-12,7.29-12,13c0,0.552-0.448,1-1,1   s-1-0.448-1-1c0-6.869,7.589-15,14-15c0.552,0,1,0.448,1,1S22.583,27.997,22.031,27.997z M57.031,39.006v1.854   c-0.078,0.051-0.191,0.107-0.33,0.165c-0.008,0.003-0.014,0.006-0.022,0.009c-0.138,0.056-0.307,0.114-0.5,0.172   c-0.019,0.006-0.036,0.011-0.055,0.017c-0.193,0.057-0.415,0.114-0.659,0.17c-0.032,0.007-0.063,0.015-0.095,0.022   c-0.247,0.055-0.519,0.109-0.814,0.16c-0.042,0.007-0.086,0.015-0.129,0.022c-0.301,0.051-0.626,0.098-0.974,0.142   c-0.048,0.006-0.098,0.012-0.146,0.018c-0.358,0.043-0.738,0.082-1.143,0.116c-0.048,0.004-0.099,0.007-0.148,0.011   c-0.42,0.033-0.86,0.06-1.327,0.079c-0.036,0.001-0.074,0.002-0.11,0.003c-0.491,0.018-1.004,0.03-1.546,0.03   c-4.55,0-7.353-0.711-8-1.137v-1.368c1.106,0.092,2.271,0.183,3.378,0.262c1.24,0.15,2.75,0.244,4.622,0.244   c0.552,0,1.069-0.009,1.562-0.024c0.163-0.005,0.309-0.014,0.465-0.02c0.318-0.013,0.632-0.027,0.925-0.046   c0.172-0.011,0.331-0.025,0.495-0.038c0.253-0.02,0.503-0.041,0.737-0.065c0.16-0.017,0.312-0.035,0.463-0.054   c0.214-0.026,0.422-0.053,0.619-0.083c0.142-0.021,0.28-0.043,0.414-0.066c0.186-0.032,0.362-0.065,0.532-0.099   c0.12-0.024,0.24-0.049,0.353-0.075c0.164-0.037,0.316-0.077,0.465-0.116c0.098-0.026,0.199-0.052,0.291-0.079   c0.148-0.044,0.282-0.089,0.415-0.135c0.073-0.026,0.153-0.05,0.222-0.076C57.003,39.015,57.019,39.011,57.031,39.006z    M50.592,43.973c0.164-0.005,0.31-0.014,0.468-0.02c0.317-0.013,0.632-0.027,0.924-0.046c0.171-0.011,0.328-0.025,0.49-0.038   c0.255-0.02,0.507-0.041,0.743-0.066c0.158-0.016,0.307-0.035,0.456-0.053c0.216-0.026,0.427-0.054,0.626-0.084   c0.139-0.021,0.274-0.042,0.406-0.065c0.189-0.032,0.369-0.066,0.542-0.101c0.117-0.024,0.233-0.047,0.343-0.072   c0.169-0.038,0.325-0.079,0.478-0.12c0.094-0.025,0.191-0.05,0.279-0.076c0.155-0.046,0.296-0.094,0.434-0.142   c0.067-0.023,0.14-0.046,0.203-0.07c0.015-0.006,0.033-0.011,0.048-0.016v1.854c-0.078,0.051-0.191,0.107-0.33,0.165   c-0.008,0.003-0.014,0.006-0.022,0.009c-0.138,0.056-0.307,0.114-0.5,0.172c-0.019,0.006-0.036,0.011-0.055,0.017   c-0.193,0.057-0.415,0.114-0.659,0.17c-0.032,0.007-0.063,0.015-0.095,0.022c-0.247,0.055-0.519,0.109-0.814,0.16   c-0.042,0.007-0.086,0.015-0.129,0.022c-0.301,0.051-0.626,0.098-0.974,0.142c-0.048,0.006-0.098,0.012-0.146,0.018   c-0.358,0.043-0.738,0.082-1.143,0.116c-0.048,0.004-0.099,0.007-0.148,0.011c-0.42,0.033-0.86,0.06-1.327,0.079   c-0.036,0.001-0.074,0.002-0.11,0.003c-0.491,0.018-1.004,0.03-1.546,0.03c-4.55,0-7.353-0.711-8-1.137v-1.362   c1.297,0.107,2.67,0.211,3.933,0.297c1.265,0.132,2.646,0.202,4.067,0.202C49.583,43.997,50.099,43.988,50.592,43.973z    M50.592,47.973c0.164-0.005,0.31-0.014,0.468-0.02c0.317-0.013,0.632-0.027,0.924-0.046c0.171-0.011,0.328-0.025,0.49-0.038   c0.255-0.02,0.507-0.041,0.743-0.066c0.158-0.016,0.307-0.035,0.456-0.053c0.216-0.026,0.427-0.054,0.626-0.084   c0.139-0.021,0.274-0.042,0.406-0.065c0.189-0.032,0.369-0.066,0.542-0.101c0.117-0.024,0.233-0.047,0.343-0.072   c0.169-0.038,0.325-0.079,0.478-0.12c0.094-0.025,0.191-0.05,0.279-0.076c0.155-0.046,0.296-0.094,0.434-0.142   c0.067-0.023,0.14-0.046,0.203-0.07c0.015-0.006,0.033-0.011,0.048-0.016v1.854c-0.078,0.051-0.191,0.107-0.33,0.165   c-0.008,0.003-0.014,0.006-0.022,0.009c-0.138,0.056-0.307,0.114-0.5,0.172c-0.019,0.006-0.036,0.011-0.055,0.017   c-0.193,0.057-0.415,0.114-0.659,0.17c-0.032,0.007-0.063,0.015-0.095,0.022c-0.247,0.055-0.519,0.109-0.814,0.16   c-0.042,0.007-0.086,0.015-0.129,0.022c-0.301,0.051-0.626,0.098-0.974,0.142c-0.048,0.006-0.098,0.012-0.146,0.018   c-0.358,0.043-0.738,0.082-1.143,0.116c-0.048,0.004-0.099,0.007-0.148,0.011c-0.42,0.033-0.86,0.06-1.327,0.079   c-0.036,0.001-0.074,0.002-0.11,0.003c-0.491,0.018-1.004,0.03-1.546,0.03c-0.431,0-0.856-0.008-1.276-0.021   c-0.133-0.004-0.263-0.012-0.395-0.017c-0.284-0.012-0.567-0.025-0.843-0.042c-0.15-0.01-0.297-0.022-0.444-0.033   c-0.252-0.019-0.501-0.04-0.744-0.065c-0.148-0.015-0.293-0.031-0.437-0.047c-0.064-0.007-0.125-0.016-0.188-0.024   c-0.219-0.746-0.544-1.446-0.958-2.085c1.348,0.203,3.063,0.334,5.286,0.334C49.583,47.997,50.099,47.988,50.592,47.973z    M50.592,51.973c0.164-0.005,0.31-0.014,0.468-0.02c0.317-0.013,0.632-0.027,0.924-0.046c0.171-0.011,0.328-0.025,0.49-0.038   c0.255-0.02,0.507-0.041,0.743-0.066c0.158-0.016,0.307-0.035,0.456-0.053c0.216-0.026,0.427-0.054,0.626-0.084   c0.139-0.021,0.274-0.042,0.406-0.065c0.189-0.032,0.369-0.066,0.542-0.101c0.117-0.024,0.233-0.047,0.343-0.072   c0.169-0.038,0.325-0.079,0.478-0.12c0.094-0.025,0.191-0.05,0.279-0.076c0.155-0.046,0.296-0.094,0.434-0.142   c0.067-0.023,0.14-0.046,0.203-0.07c0.015-0.006,0.033-0.011,0.048-0.016v1.854c-0.078,0.051-0.191,0.107-0.33,0.165   c-0.008,0.003-0.014,0.006-0.022,0.009c-0.138,0.056-0.307,0.114-0.5,0.172c-0.019,0.006-0.036,0.011-0.055,0.017   c-0.193,0.057-0.415,0.114-0.659,0.17c-0.032,0.007-0.063,0.015-0.095,0.022c-0.247,0.055-0.519,0.109-0.814,0.16   c-0.042,0.007-0.086,0.015-0.129,0.022c-0.301,0.051-0.626,0.098-0.974,0.142c-0.048,0.006-0.098,0.012-0.146,0.018   c-0.358,0.043-0.738,0.082-1.143,0.116c-0.048,0.004-0.099,0.007-0.148,0.011c-0.42,0.033-0.86,0.06-1.327,0.079   c-0.036,0.001-0.074,0.002-0.11,0.003c-0.491,0.018-1.004,0.03-1.546,0.03c-0.648,0-1.279-0.02-1.898-0.049   c-0.145-0.007-0.289-0.014-0.432-0.022c-0.602-0.035-1.191-0.081-1.746-0.143c-0.015-0.002-0.028-0.004-0.043-0.006   c0.08-0.454,0.12-0.913,0.12-1.372c0-0.075-0.007-0.151-0.009-0.227c0.001-0.061,0.009-0.12,0.009-0.181   c0-0.066-0.008-0.13-0.01-0.196c0.815,0.084,1.687,0.131,2.577,0.161c0.406,0.022,0.861,0.035,1.433,0.035   C49.583,51.997,50.099,51.988,50.592,51.973z M56.771,36.994c-0.011,0.005-0.023,0.01-0.035,0.015   c-0.111,0.048-0.24,0.097-0.393,0.147c-0.016,0.005-0.034,0.01-0.05,0.015c-0.155,0.049-0.329,0.099-0.523,0.149   c-0.02,0.005-0.037,0.01-0.057,0.015c-0.202,0.051-0.427,0.1-0.669,0.149c-0.043,0.009-0.086,0.017-0.13,0.026   c-0.247,0.048-0.512,0.094-0.798,0.138c-0.04,0.006-0.083,0.012-0.124,0.018c-0.29,0.043-0.596,0.083-0.923,0.12   c-0.02,0.002-0.039,0.005-0.059,0.007c-0.333,0.037-0.691,0.068-1.061,0.096c-0.068,0.005-0.136,0.01-0.205,0.015   c-0.369,0.026-0.755,0.047-1.158,0.062c-0.072,0.003-0.147,0.005-0.221,0.007c-0.428,0.014-0.869,0.023-1.333,0.023   s-0.905-0.009-1.333-0.023c-0.073-0.002-0.148-0.004-0.221-0.007c-0.403-0.015-0.789-0.036-1.158-0.062   c-0.069-0.005-0.137-0.01-0.205-0.015c-0.371-0.028-0.728-0.06-1.061-0.096c-0.02-0.002-0.039-0.005-0.059-0.007   c-0.327-0.037-0.633-0.077-0.923-0.12c-0.041-0.006-0.084-0.012-0.124-0.018c-0.286-0.044-0.551-0.09-0.798-0.138   c-0.044-0.009-0.087-0.017-0.13-0.026c-0.241-0.049-0.467-0.099-0.669-0.149c-0.02-0.005-0.038-0.01-0.057-0.015   c-0.194-0.05-0.369-0.1-0.523-0.149c-0.016-0.005-0.035-0.01-0.05-0.015c-0.153-0.05-0.281-0.099-0.393-0.147   c-0.012-0.005-0.023-0.01-0.035-0.015c0.927-0.705,3.775-1.997,7.74-1.997S55.844,36.289,56.771,36.994z M31.883,55.064   c-0.175-0.293-0.322-0.596-0.444-0.907c-0.008-0.022-0.016-0.044-0.024-0.066c-0.115-0.306-0.207-0.618-0.27-0.937   c-0.004-0.022-0.006-0.044-0.01-0.066c-0.055-0.295-0.085-0.595-0.094-0.897c-0.001-0.041-0.006-0.082-0.006-0.124   c-0.003-0.303,0.02-0.609,0.063-0.915c0.009-0.065,0.018-0.13,0.03-0.195c0.045-0.26,0.103-0.517,0.182-0.766   c0.008-0.027,0.02-0.052,0.029-0.078c0.084-0.251,0.185-0.496,0.302-0.733c0.011-0.023,0.022-0.046,0.033-0.068   c0.54-1.059,1.391-1.954,2.424-2.543c0.002-0.001,0.005-0.003,0.007-0.004c0.235-0.134,0.483-0.247,0.735-0.347   c0.062-0.024,0.125-0.046,0.188-0.069c0.228-0.082,0.461-0.152,0.7-0.205c0.026-0.006,0.051-0.014,0.077-0.02   c0.288-0.059,0.577-0.092,0.865-0.109c0.061-0.004,0.122-0.007,0.183-0.009c0.289-0.009,0.576-0.001,0.861,0.032   c0.027,0.003,0.053,0.009,0.081,0.012c0.295,0.038,0.587,0.096,0.875,0.179c0.009,0.003,0.018,0.004,0.027,0.007   c0.305,0.089,0.605,0.203,0.897,0.342c2.03,0.963,3.441,3.026,3.441,5.419c0,3.309-2.691,6-6,6   C34.844,57.997,32.932,56.817,31.883,55.064z M57.031,56.86c-0.648,0.427-3.452,1.137-8,1.137c-2.215,0-4.3-0.174-5.858-0.475   c0.457-0.546,0.838-1.151,1.135-1.802c0.09,0.011,0.187,0.019,0.279,0.03c0.149,0.018,0.301,0.033,0.453,0.049   c0.266,0.027,0.536,0.052,0.811,0.073c0.159,0.012,0.316,0.025,0.477,0.036c0.297,0.019,0.599,0.034,0.904,0.047   c0.143,0.006,0.284,0.014,0.429,0.019c0.451,0.014,0.907,0.023,1.37,0.023c0.551,0,1.068-0.009,1.561-0.024   c0.164-0.005,0.31-0.014,0.468-0.02c0.317-0.013,0.632-0.027,0.924-0.046c0.171-0.011,0.328-0.025,0.49-0.038   c0.255-0.02,0.507-0.041,0.743-0.066c0.158-0.016,0.307-0.035,0.456-0.053c0.216-0.026,0.427-0.054,0.626-0.084   c0.139-0.021,0.274-0.042,0.406-0.065c0.189-0.032,0.369-0.066,0.542-0.101c0.117-0.024,0.233-0.047,0.343-0.072   c0.169-0.038,0.325-0.079,0.478-0.12c0.094-0.025,0.191-0.05,0.279-0.076c0.155-0.046,0.296-0.094,0.434-0.142   c0.067-0.023,0.14-0.046,0.203-0.07c0.015-0.006,0.033-0.011,0.048-0.016V56.86z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#ffffff"/>
	<path d="M32.031,16.304v-2.307c0-0.552-0.448-1-1-1h-12c-0.552,0-1,0.448-1,1s0.448,1,1,1h11v1h-11c-0.552,0-1,0.448-1,1   s0.448,1,1,1h11.925c0.896,0.746,2,1.173,3.179,1.173c1.335,0,2.591-0.521,3.536-1.466c0.391-0.391,0.391-1.023,0-1.414   s-1.023-0.391-1.414,0C35.127,17.419,33.168,17.423,32.031,16.304z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#ffffff"/>
	<path d="M18.086,10.027c0.407,1.178,1.504,1.97,2.73,1.97h7.431c1.226,0,2.323-0.792,2.73-1.97   c0.388-1.126,1.607-3.645,2.553-4.445c0.829-0.703,1.218-1.792,1.014-2.842c-0.2-1.033-0.921-1.849-1.928-2.182   c-2.999-0.993-5.666-0.658-7.698,0.967c-0.357,0.287-0.86,0.287-1.22,0c-2.032-1.625-4.701-1.96-7.697-0.967   c-1.007,0.333-1.729,1.148-1.929,2.182c-0.204,1.05,0.185,2.139,1.014,2.842C16.156,6.489,17.796,9.187,18.086,10.027z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#ffffff"/>
</g></g> </svg>
                                    <div class="walletbg" id="walletbackg">
                                    <i class="fas fa-wallet"></i>
                                    </div>
            </div>
        <div class="masscont" id="masscont">
        <div class="container">
            <div id="heal">
                <div id="boxHeal"></div>
            </div>
            <div id="armor">
                <div id="boxArmor"></div>
            </div>
            <div id="hunger">
                    <svg class="iconhunger" width="36" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                        <path d="M9.44096 7.09788L12.0944 4.62314C13.9855 2.86906 14.0734 1.25095 13.9708 0.462298C13.9561 0.407908 13.9268 0.353518 13.8828 0.312725C13.7656 0.203945 13.5897 0.203945 13.4724 0.312725L12.6954 1.03339L2.94672 10.0893C2.62421 10.3885 2.62421 10.8916 2.94672 11.1907C3.26923 11.4899 3.81164 11.4899 4.13415 11.1907L4.33939 10.946C4.70588 10.4973 6.58232 7.98172 6.86086 7.58739C6.97813 7.42422 7.09541 7.32904 7.18337 7.28825C7.32997 7.23386 7.44724 7.30185 7.44724 7.30185C8.09227 7.65538 8.91321 7.58739 9.44096 7.09788Z" fill="white"/>
                        <path d="M4.95508 6.20047C5.49749 5.9965 5.86398 6.17327 6.09854 6.36364L6.86084 5.65657C6.65561 5.43901 6.46503 5.08547 6.68493 4.59596C6.99278 3.90249 7.242 3.45377 6.17184 2.37957C5.131 1.29176 3.4598 0.285548 2.68283 0.0679876C2.50692 0.027195 2.331 0 2.19906 0C2.1844 0 2.1844 0 2.16974 0C2.12577 0 2.09645 0.0135975 2.06713 0.0407925C1.99383 0.10878 1.99383 0.21756 2.06713 0.27195L4.70587 2.7195C4.83781 2.84188 4.83781 3.04584 4.70587 3.18182C4.57393 3.3042 4.35404 3.3042 4.20744 3.18182L3.89959 2.89627L3.21058 2.25719C2.69749 1.78127 2.36032 1.46853 2.03781 1.22378C1.26084 0.625486 0.95299 0.611888 0.95299 0.611888C0.95299 0.611888 0.835713 0.598291 0.733095 0.679876C0.645137 0.775058 0.659797 0.883838 0.659797 0.883838C0.659797 0.883838 0.674456 1.16939 1.33414 1.90365C1.59802 2.2028 1.93519 2.51554 2.44828 2.99145L3.13728 3.63054L3.44514 3.91608C3.57707 4.03846 3.57707 4.24242 3.44514 4.3784C3.3132 4.50078 3.0933 4.50078 2.94671 4.3784L0.307964 1.93085C0.234666 1.86286 0.117388 1.86286 0.0587496 1.93085C0.0294302 1.95804 0.0147705 1.98524 0.0147705 2.02603C0.0147705 2.02603 0.0147705 2.03963 0.0147705 2.05322C0.0147705 2.1756 0.0440899 2.33877 0.0880689 2.50194C0.307964 3.22261 1.40744 4.75913 2.58022 5.75175C3.73833 6.71717 4.20744 6.48601 4.95508 6.20047Z" fill="white"/>
                        <path d="M9.51434 7.737C9.1625 7.95456 8.73737 8.07694 8.29758 8.07694C8.03371 8.07694 7.78449 8.03614 7.53528 7.95456L10.6138 11.3539C11.0683 11.7619 11.7866 11.7619 12.2264 11.3539C12.6662 10.946 12.6662 10.2661 12.2264 9.85821L9.51434 7.737Z" fill="white"/>
                        </g>
                        </svg> 
                <div id="boxHunger">                           
            </div>
        </div>
            <div id="thirst">
                    <svg class="iconthirst" width="36" height="14" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.74196 0.100677C3.72525 0.0356591 3.65843 -0.013104 3.57491 0.00315034C3.52479 0.0194047 3.49138 0.0519134 3.47467 0.100677C2.9067 4.55437 0 5.46462 0 8.5692C0.0501155 10.5035 1.68722 12.0476 3.67514 11.9989C5.61294 11.9664 7.16652 10.4385 7.19993 8.5692C7.21663 5.48087 4.30993 4.55437 3.74196 0.100677ZM3.19069 5.02575C3.15728 5.15579 3.10716 5.30207 3.07375 5.44836C2.82317 6.34235 2.52248 7.35013 2.52248 8.52044C2.52248 9.15436 2.13826 9.38192 1.77075 9.38192C1.35312 9.38192 1.01902 9.05683 1.01902 8.65048C1.01902 7.26885 1.70393 6.35861 2.30531 5.56215C2.48907 5.31833 2.67283 5.07451 2.82317 4.84695C2.88999 4.74943 3.00693 4.73317 3.10716 4.79819C3.12387 4.81444 3.14057 4.8307 3.15728 4.84695C3.19069 4.89572 3.20739 4.96073 3.19069 5.02575Z" fill="white"/>
                        </svg>
                <div id="boxThirst"></div>
            </div>
            <div id="stamina">
                    <svg class="iconstamina" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 487.811 487.81" style="enable-background:new 0 0 487.811 487.81;" xml:space="preserve"><g><g>
                            <g id="_x33_6_24_">
                                <g>
                                    <path d="M150.463,109.521h150.512c3.955,0,7.16-3.206,7.16-7.161c0-3.955-3.205-7.161-7.16-7.161H150.463     c-3.955,0-7.161,3.206-7.161,7.161C143.302,106.315,146.508,109.521,150.463,109.521z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                    <path d="M15.853,179.537h150.511c3.955,0,7.161-3.206,7.161-7.161s-3.206-7.16-7.161-7.16H15.853     c-3.955,0-7.161,3.205-7.161,7.16S11.898,179.537,15.853,179.537z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                    <path d="M56.258,253.214c0,3.955,3.206,7.162,7.161,7.162H213.93c3.955,0,7.161-3.207,7.161-7.162s-3.206-7.16-7.161-7.16H63.419     C59.464,246.054,56.258,249.259,56.258,253.214z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                    <path d="M142.396,336.44H7.161C3.206,336.44,0,339.645,0,343.6s3.206,7.161,7.161,7.161h135.235c3.955,0,7.161-3.206,7.161-7.161     S146.351,336.44,142.396,336.44z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                    <path d="M385.729,154.418c21.6,0,39.111-17.513,39.111-39.114s-17.512-39.113-39.111-39.113     c-21.605,0-39.119,17.513-39.119,39.113C346.609,136.905,364.123,154.418,385.729,154.418z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                    <path d="M450.066,143.155c-22.459,31.459-52.533,35.102-84.895,15.89c-2.203-1.306-11.977-6.691-14.141-7.977     c-52.061-30.906-104.061-18.786-138.934,30.05c-14.819,20.771,19.455,40.459,34.108,19.93     c18.018-25.232,40.929-32.533,65.986-24.541c-12.83,22.27-24.047,44.405-39.875,75.853     c-15.832,31.448-50.787,56.562-84.374,36.92c-24.235-14.165-46.09,20.651-21.928,34.772     c45.854,26.799,99.619,10.343,127.066-24.493c0.952,0.509,1.958,0.968,3.062,1.354c22.422,7.812,51.814,28.61,60.77,35.981     c8.953,7.371,24.336,44.921,33.471,63.788c11.082,22.893,46.871,6.219,35.748-16.771c-10.355-21.406-27.736-64.129-41.293-74.938     c-10.875-8.669-31.988-24.803-49.895-33.956c12.115-23.466,24.729-46.679,38.008-69.491     c42.328,12.969,82.561-2.308,111.215-42.446C498.996,142.312,464.73,122.624,450.066,143.155z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                                </g>
                            </g>
                        </g></g> </svg>
                <div id="boxStamina"></div>
                <div id="voice">
                </div>
                <div class="fa-microphonebg" id="fa-microphonebg">
                <i class="fas fa-microphone"><span id="boxVoice"></span></i>
                </div>  
            </div>
            </div>
            </div> 
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>
    <script src="js/app.js">
    </script>
    </body>
</html>

Answer 1

在修改要右对齐的内容的宽度时，使用 right: 而不是 left: 进行 css 对齐。