如何创建没有名称的“空”<Label> 标签答案

【问题标题】：How To Create "Empty" <Label> Tag Without Name如何创建没有名称的“空”<Label> 标签
【发布时间】：2015-09-27 21:54:56
【问题描述】：

我正在使用 Javascript 创建一个简单的计算器，并且已经完成了 Javascript 代码。我需要创建三个标签：“第一个数字”、“第二个数字”和一个 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>

当我从标签标签中删除单词“Sum”时，文本框向左移动 - 我需要它与其他两个文本框保持对齐。有没有办法在不输入任何标签标签的情况下将文本框保留在原处？谢谢您的帮助。

CSS：

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

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

【问题讨论】：

标签： javascript jquery html tags label

【解决方案1】：

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

我想这就是你想要的。

【讨论】：

【解决方案2】：

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

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

无论里面的文本如何，标签元素都应该保持不变。

【讨论】：

既然我已经有标签的 CSS，我如何为那个特定的标签创建另一个 CSS 元素？
您只需要添加display: inline-block 声明。没有这个，标签默认为内联显示，并且只占用其内容的宽度。

【解决方案3】：

您可以向目标 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>

【讨论】：

【解决方案4】：

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

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

【讨论】：