javascript - 如何创建没有名称的 "Empty"<Label> 标记

标签 javascript jquery html tags label

我正在使用 Javascript 创建一个简单的计算器,并且已经完成了 Javascript 代码。我需要创建三个标签:“第一个数字”、“第二个数字”和一个总和标签,但我不希望“总和”显示在文本框的左侧。这是我当前的 HTML 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
<script src="calculator.js"></script>
</head>
<body>
<section>
<h1>Calculator</h1>

<label>Sum:</label>
<input type="text" id="sum" disabled="disabled">
<br>
<label>First Number:</label>
<input type="text" id="firstNumber">    
<br>
<label>Second Number:</label>
<input type="text" id="secondNumber">
<br>

<div>
<input type="button" id="calc" value="Calculate">
<input type="button" id="clear" value="Clear">
</div>

</section>
</body>

</html>

当我从 label 标记中删除单词“Sum”时,文本框向左移动 - 我需要它与其他两个文本框保持对齐。有什么方法可以将文本框保持在原处而无需在 label 标记中输入任何内容?谢谢您的帮助。

CSS:

label {
float: left;
width: 11em;
text-align: right; 
}

如何在 CSS 中为该特定标签创建另一个元素?

最佳答案

html:

<body>
<section>
<h1>Calculator</h1>

<label class="sum">Sum:</label>
<input type="text" id="sum" disabled="disabled">
<br>
<label>First Number:</label>
<input type="text" id="firstNumber">    
<br>
<label>Second Number:</label>
<input type="text" id="secondNumber">
<br>

<div>
<input type="button" id="calc" value="Calculate">
<input type="button" id="clear" value="Clear">
</div>

</section>
</body>

CSS:

label {
float: left;
width: 11em;
text-align: right; 
}
.sum {
     visibility: hidden;
}

我想这就是你想要的。

关于javascript - 如何创建没有名称的 "Empty"<Label> 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32813245/

相关文章:

javascript - 未定义从 angularjs 指令将 $event 传递给函数

javascript - 同时使用 Vue.js 和 jQuery 自动完成

javascript - 最多将 5 条搜索保存到 LocalHost

jquery - pjax - 出现错误时渲染页面

java - 如何在 URL 命中时打开子目录的 HTML 页面

javascript - 在 Flutter 的 html 文件中使用 js 文件

javascript - 将字符串数组作为 jquery ajax 中的数据传递给 web api

javascript - 当我更新 HTML 时,Keydown 事件停止触发

javascript - Contenteditable 高度过渡

html - 移动网站的 CSS 问题