我有一个外部样式表和我正在处理的 html 页面。 CSS 文件链接正确，页面呈现除了我为搜索框添加的形式之外的样式。这是 HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>ASA Databse</title>
</head>
<body>
<h1 align="center">Autism Resources</h1>
<form align="center">
<input type="text" placeholder="Enter Query..." required>
<input type="button" value="Search Database">
</form>
<table align="center">
<tr>
<th>Title</th>
<th>Type</th>
<th>Item Number</th>
<th>Status</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td>Charles d'Orleans</td>
<td>Poemes</td>
<td class="money"></td>
<td class="money">$5,866.00</td>
</tr>
<tr>
<td>T.S. Eliot</td>
<td>Poems 1909 - 1925</td>
<td class="money">$1,250.00</td>
<td class="money">$8,499.35</td>
</tr>
<tr class="even">
<td>Sylvia Plath</td>
<td>The Colossus</td>
<td class="money"></td>
<td class="money">$1031.72</td>
</tr>
</table>
</body>
这是 CSS:
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
table {
width: 1000px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr:hover {
background-color: #207cca;}
.money {
text-align: right;}
form {
width: 500px;
margin: 50px auto;}
.search {
padding: 8px 15px;
background: rgba(50, 50, 50, 0.2);
border: 0px solid #dbdbdb;}
.button {
position: relative;
padding: 6px, 15px;
left:-8px;
border: 2px solid #207cca;
background-color: #207cca;
color: #fafafa;}
.button:hover {
background-color:#fafafa;
color:#207cca;}
在表单的宽度和边距之后，搜索栏中没有任何样式被实现...提前感谢您的帮助!
最佳答案
您的样式表中有 .search，但没有包含 class="search" 的元素。
尝试:
<input type="text" placeholder="Enter Query..." id="search" class="search" name="search" required>
关于html - 搜索框表单未采用外部样式表中的 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28466728/