问题描述
我正尝试在右侧更改特定文本列的对齐方式。尝试使用类，它不起作用。我什至尝试使用id元素，它也不起作用。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf=8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
</head>
<style>
.top-bottom {
background-color: skyblue;
}
.total_column {
background-color: silver;
}
.all:hover {
background-color: yellow;
}
</style>
<body>
<h1>Book Ordering System</h1>
<table border="2">
<form method="post" action="file.PHP">
<tr style="font-weight:bold" ; class="top-bottom all">
<td>No.</td>
<td>Book Title</td>
<td>Author</td>
<td>Category</td>
<td>Unit Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr class="all">
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column " />
</td>
</tr>
<tr class="all">
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="all">
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec1.1"></label>
<input type="text" name="sec1.1" id="sec1.1" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec1.2"></label>
<input type="text" name="sec1.2" id="sec1.2" value="0.00" />
</td>
<td>
<label for="sec1.3"></label>
<input type="text" name="sec1.3" id="sec1.3" value="0" />
</td>
<td>
<label for="sec1.4"></label>
<input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
</td>
</tr>
<tr class="top-bottom all">
<td colspan="5" align="right"><input type="button" onclick="alert('Hello World!')" value="Calculate Grand Total Price"> </td>
<td colspan="2" align="right"><input type="text" name="sec3.1" id="sec3.1" value="0.00" readonly="readonly" /></td>
</tr>
</form>
</table>
</body>
</html>结果：
解决方法
您要对齐的文本在输入字段内。您要对齐文本而不是输入字段。
td.align-right input {
text-align: right;
}
然后将class =“ align-right”应用于要右对齐的所有td。