html - 将可变文本移至右侧

Question

我制作了一个月份/季节计数器，按下按钮后将变量的名称更改为特定的月份和季节(季节在下方)整个事情都在屏幕的右侧，右浮动和一些使用 margin-right 进行位置调整，因此当谈到“夏季”时，整个事情向左移动了一点，而不是像以前那样向右移动，而没有添加“float:right”和“margin-right”。我真的不知道如何解决它，我不认为以某种方式改变每个特定季节/月份的位置是正确的答案。 我很感谢任何帮助。

var numbermonth = 3;
        var month = "March";
        var season = "Spring";

        setInterval(function () {
          document.getElementById("month").innerHTML = month;
            document.getElementById("season").innerHTML = season;
            document.getElementById("numbermonth");
        }, 50);

function cekani() {
            numbermonth += 1;


            if (numbermonth == 1) {
                month = "January";
                document.getElementById("month").innerHTML = month;
            }


            if (numbermonth == 2) {
                month = "February";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 3) {
                month = "March";
                season = "Spring";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 4) {
                month = "April";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 5) {
                month = "May";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;

            }

            if (numbermonth == 6) {
                month = "June";
                season = "Summer"
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 7) {
                month = "July";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 8) {
                month = "August";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 9) {
                month = "September";
                season = "Autumn"
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 10) {
                month = "October";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 11) {
                month = "November";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 12) {
                month = "December";
                season = "Winter"
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;
                numbermonth = 0;

            }

            if (season == "Spring") {
                food = food + farmers * 2;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;

            }

            if (season == "Summer") {
                food = food + farmers * 3;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }

            if (season == "Autumn") {
                food = food + farmers * 1.25;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }

            if (season == "Winter") {
                food = food + farmers * 0.50;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }



        }

    </script>

#sezonaMesic {
            float: right;
            margin-top: -2.15%;
            margin-right: 2.5%;
        }
        
        #casTabulka {
            float: right;
            margin-top: -3.01%;
            margin-right: 6%;
        }

<table id="sezonaMesic">
            <tr>
                <td>
                    <div class="linky" style="font-size: 320%">
                        <b>
                            <img src="nextmonth.png" alt="button" style="width: 200px; height: 90px; cursor: pointer;" onclick="cekani()">
                        </b>
                    </div>
                </td>
            </tr>
        </table>

<table id="casTabulka">
            <tr>
                <td>
                    <div class="linky" style="font-size: 300%">
                        <b>
                            Month = <element id="month"></element><br> Season = <element id="season"></element>
                        </b>
                    </div>
                </td>
            </tr>
        </table>
        
 

这应该是一个有效的片段。 IDK 如果它看起来不错，很可能不是，但我希望该文本在右侧展开

Answer 1

出现此问题是因为容器没有指定大小，因此它会根据内容的大小进行调整。然后，当月份/季节的名称发生变化时，它会使容器变大/变小，从而导致分别向左和向右“跳跃”。

一个快速的解决方案是为将要更改的文本容器添加一个大小(在本例中为 #casTabulka .linky)。但是加上宽度是不够的，因为如果里面的字太长，会造成换行，跳成多行。为防止这种情况，您可以使用 white-space: nowrap 将容器的全部内容作为一个单词(这样就不会分成多行)。像这样:

#casTabulka .linky {
  width: 400px;
  white-space: nowrap;
}

您可以看到添加这些更改后如何不再有跳转(您可能需要调整大小以使其不与按钮重叠):

var numbermonth = 3;
var month = "March";
var season = "Spring";

setInterval(function() {
  document.getElementById("month").innerHTML = month;
  document.getElementById("season").innerHTML = season;
  document.getElementById("numbermonth");
}, 50);

function cekani() {
  numbermonth += 1;


  if (numbermonth == 1) {
    month = "January";
    document.getElementById("month").innerHTML = month;
  }


  if (numbermonth == 2) {
    month = "February";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 3) {
    month = "March";
    season = "Spring";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 4) {
    month = "April";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 5) {
    month = "May";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;

  }

  if (numbermonth == 6) {
    month = "June";
    season = "Summer"
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 7) {
    month = "July";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 8) {
    month = "August";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 9) {
    month = "September";
    season = "Autumn"
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 10) {
    month = "October";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 11) {
    month = "November";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 12) {
    month = "December";
    season = "Winter"
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;
    numbermonth = 0;

  }

  if (season == "Spring") {
    food = food + farmers * 2;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;

  }

  if (season == "Summer") {
    food = food + farmers * 3;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }

  if (season == "Autumn") {
    food = food + farmers * 1.25;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }

  if (season == "Winter") {
    food = food + farmers * 0.50;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }



}

#sezonaMesic {
  float: right;
  margin-top: -2.15%;
  margin-right: 2.5%;
}

#casTabulka {
  float: right;
  margin-top: -3.01%;
  margin-right: 6%;
}

#casTabulka .linky {
  width: 400px;
  white-space: nowrap;
}

<table id="sezonaMesic">
  <tr>
    <td>
      <div class="linky" style="font-size: 320%">
        <b>
                            <img src="nextmonth.png" alt="button" style="width: 200px; height: 90px; cursor: pointer;" onclick="cekani()">
                        </b>
      </div>
    </td>
  </tr>
</table>

<table id="casTabulka">
  <tr>
    <td>
      <div class="linky" style="font-size: 300%">
        <b>
                            Month = <element id="month"></element><br> Season = <element id="season"></element>
                        </b>
      </div>
    </td>
  </tr>
</table>