Question

我正在使用Javascript创建一个简单的计算器，并且已经完成了Javascript代码。我需要创建三个标签：＆＃34; First Number＆＃34;，＆＃34; Second Number＆＃34;和Sum标签，但我不想＆＃34; Sum＆＃34;显示在文本框的左侧。这是我目前的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>

当我删除单词＆＃34; Sum＆＃34;从标签标签，文本框向左移动 - 我需要它与其他两个文本框保持对齐。有没有办法让文本框保持原样而不在标签标签中输入任何内容？谢谢您的帮助。

CSS：

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

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

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

我认为这就是你想要的。

Answer 2

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

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

无论内部文本如何，标签元素都应保持不变。

Answer 3

您可以向目标name元素添加一个类，例如label，然后将以下内容添加到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表格。我认为，实现这一目标的速度最快，最简单。

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

如何创建＆＃34;空＆＃34; <label>没有名称的标签

4 个答案: