我制作了一个月份/季节计数器，按下按钮后，将var的名称更改为特定的月份和季节（季节在下面），整个对象都在屏幕的右侧，并且浮动在右侧位置调整使用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如果看起来不错，很可能不是，但我希望该文本在右侧展开
答案 0 :(得分：0)
发生此问题是因为该容器没有指定的大小，因此它会根据其内容的大小进行调整。然后，当月份/季节的名称更改时，它将使容器变大/变小，并导致“跳跃”分别向左和向右。
一种快速的解决方案是在要更改的文本容器中增加一个大小（在这种情况下，该大小将用于#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>