Question

我想用Java开发计算器。我被设计困住了。文本框显示超出了表格单元格的边界。以下是

 /*The Style file is the following*/
 
 table{
    	border:1px solid silver;
    	border-radius:5px;
    }
    
    .btn{
    	width:75px;
    	height:45px;
    }
    
    #equalToBtn{
    	background-color:blue;
    	color:white;
    	border-color:blue;
    }
    
    #resultText{
    	width:100%;
    	height:40px;
    	margin-right:2px;
    }

<!--HTML code-->

    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="calculator.css">
    	</head>
    	<body>
    		<table>
    			<tr>
    			<td colspan="4"><input type="text" id="resultText"></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">7</button></td>
    				<td><button class="btn" type="button">8</button></td>
    				<td><button class="btn" type="button">9</button></td>
    				<td><button class="btn" type="button">/</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">4</button></td>
    				<td><button class="btn" type="button">5</button></td>
    				<td><button class="btn" type="button">6</button></td>
    				<td><button class="btn" type="button">*</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">1</button></td>
    				<td><button class="btn" type="button">2</button></td>
    				<td><button class="btn" type="button">3</button></td>
    				<td><button class="btn" type="button">-</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">0</button></td>
    				<td><button class="btn" type="button">.</button></td>
    				<td><button class="btn" id="equalToBtn" type="button">=</button></td>
    				<td><button class="btn" type="button">+</button></td>
    			</tr>
    		</table>
    	</body>
    </html>

我将文本宽度设置为100％，并且溢出。任何帮助将不胜感激。

提前谢谢！

Answer 1

已添加

*{
box-sizing: border-box;
}

由于输入有填充而无法使用。希望这可以帮助。

/*The Style file is the following*/

*{
box-sizing: border-box;
}
 
 table{
    	border:1px solid silver;
    	border-radius:5px;
    }
    
    .btn{
    	width:75px;
    	height:45px;
    }
    
    #equalToBtn{
    	background-color:blue;
    	color:white;
    	border-color:blue;
    }
    
    #resultText{
    	width:100%;
    	height:40px;
    	margin-right:2px;
    }

<!--HTML code-->

    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="calculator.css">
    	</head>
    	<body>
    		<table>
    			<tr>
    			<td colspan="4"><input type="text" id="resultText"></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">7</button></td>
    				<td><button class="btn" type="button">8</button></td>
    				<td><button class="btn" type="button">9</button></td>
    				<td><button class="btn" type="button">/</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">4</button></td>
    				<td><button class="btn" type="button">5</button></td>
    				<td><button class="btn" type="button">6</button></td>
    				<td><button class="btn" type="button">*</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">1</button></td>
    				<td><button class="btn" type="button">2</button></td>
    				<td><button class="btn" type="button">3</button></td>
    				<td><button class="btn" type="button">-</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">0</button></td>
    				<td><button class="btn" type="button">.</button></td>
    				<td><button class="btn" id="equalToBtn" type="button">=</button></td>
    				<td><button class="btn" type="button">+</button></td>
    			</tr>
    		</table>
    	</body>
    </html>

HTML表中的输入文本溢出

1 个答案: