将变量文本移到右侧

时间：2018-12-08 23:31:11

标签： html css element

我制作了一个月份/季节计数器，按下按钮后，将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如果看起来不错，很可能不是，但我希望该文本在右侧展开

1 个答案:

答案 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>

相关问题
最新问题