Question

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

感谢那些帮助我解决了最初问题的人。

  <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

>

Answer 1

您可以为按钮添加一个容器，并将其设置为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>

Answer 2

我尝试更改您的代码，以便您了解更改：


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

<body>
<div class="row button-div">
  <input type="button" value="A+" onclick="resizeText(1)" id="plustext">
  <input type="button" value="A-" onclick="resizeText(-1)" id="minustext">
  </div>
  <div id="textDiv" class='row'>
    <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>


.button-div
{
  display:flex;
}

这不会增加2个按钮之间的间距

如果不相信我，请看一下jsfiddle： https://jsfiddle.net/dupinderdhiman/cg5mws0n/7/

如何更正字体调整按钮的对齐方式

2 个答案: