如何创建没有名称的 "Empty" <Label> 标签

Question

我正在使用 Javascript 创建一个简单的计算器并且已经完成了 Javascript 代码。我需要创建三个标签："First Number"、"Second Number" 和一个 Sum 标签，但我不希望 "Sum" 显示在文本框的左侧。这是我当前的 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 中为该特定标签创建另一个元素？

Answer 1

您可以使用 CSS 为所有标签元素指定固定宽度，例如：

    label {width: 150px; display: inline-block; }

不管里面的文本如何，label 元素都应该保持不变。

Answer 2

使用HTMLtable。我认为实现它的最快和最简单的方法。

<table>
    <tr>
        <td></td>
        <td><input type="text" id="sum" disabled="disabled"></td>
    </tr>
    <tr>
        <td><label>First Number:</label></td>
        <td><input type="text" id="firstNumber"></td>
    </tr>
</table>

Answer 3

您可以将 class 添加到目标 label 元素，例如 name，然后将以下内容添加到您的 CSS:

.name {
    width: 40%;
    display: inline-block;
    text-align: right;
    background-color:#eee;
}

.name {
  width: 40%;
  display: inline-block;
  text-align: right;
  background-color:#eee;
}

<section>
<h1>Calculator</h1>

<label class="name">Sum:</label>
<input type="text" id="sum" disabled="disabled">
<br>
<label class="name">First Number:</label>
<input type="text" id="firstNumber">    
<br>
<label class="name">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>

Answer 4

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;
}

我想这就是你想要的。

如何创建没有名称的 "Empty" <Label> 标签

How To Create "Empty" <Label> Tag Without Name

html

javascript

tags

jquery

label