我已经更新了我的代码，以便可以在导航栏中看到按钮，并且仅针对 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
>
最佳答案
您可以为按钮添加一个容器，并将其设置为 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>关于jquery - 如何纠正字体调整按钮对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55892857/