时间戳

首页 > 解决方案 > 如何纠正字体调整按钮对齐

jquery - 如何纠正字体调整按钮对齐

问题描述

我已经更新了我的代码，以便可以在导航栏中看到按钮，并且如果有人正在寻找简单的字体大小调整器代码，则可以随意将名称更新为项目的其他任何名称的“内容”标签. 它还将保存到本地存储，以在整个页面重新加载过程中保持相同的字体大小。

感谢那些帮助我解决我原来的问题的人。

  <head>


  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js">


  </script>

  <!-- On click the positive and minus will increase or decrease the size of text -->
  <div class="button-div">
    <input type="button" value="A+" onclick="resizeText(1)" id="plustext">
    <input type="button" value="A-" onclick="resizeText(-1)" id="minustext">
  </div>

  <div class="flex-container">

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Page 1</a>
          </li>
          <li>
            <a href="#">Page 2</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-user"></span> Sign Up</a>
          </li>
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-log-in"></span> Login</a>
          </li>

        </ul>

      </div>
    </nav>
  </div>

  </div>

</head>

<body>
  <style>
    .button-div {
      display: flex;
    }

    .flex-container {
      display: flex;
    }
  </style>
  <!-- This text will increase or decrease depending on the button click -->
  <div id="content" class='row'>
    <span class="second">This text will be made bigger</span>
  </div>




  <script type="text/javascript">

    let fontSize = localStorage.getItem("myFontSize") || "1em";

    //  Any elements with content as the id will be increased or decreased
    var fontchanger = document.getElementById("content");

    fontchanger.style.fontSize = fontSize;

    function resizeText(multiplier) {
      // if (fontchanger.style.fontSize == "") { fontchanger.style.fontSize = "1.0em"; }
      fontchanger.style.fontSize =
        parseFloat(fontchanger.style.fontSize) + (multiplier * 0.2) + "em";
      localStorage.setItem('myFontSize', fontchanger.style.fontSize);
    }



  </script>

  </head>

  </body

>

标签： jqueryhtmlcss

解决方案

您可以为按钮添加一个容器并将其设置为 flex 和 flex-start 以将按钮与容器元素的起始位置对齐。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div style="display: flex; justify-content:flex-start;">
    <input type="button" value="A+" onclick="resizeText(1)" id="plustext">
    <input type="button" value="A-" onclick="resizeText(-1)" id="minustext">
  </div>
  <div id="textDiv">
    <span class="second">This text will be made bigger</span>
  </div>

  <script type="text/javascript">
    function resizeText(multiplier) {
      if (document.body.style.fontSize == "") {
        document.body.style.fontSize = "1.0em";
      }
      document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
    }
  </script>
</body>

推荐阅读