1
我试图做一个简单的搜索页面。它有一个搜索栏和一张桌子。在某些搜索查询后，表格会被人工填充。但对我而言，这两个因素正在相互传递。HTML CSS元素过来对方
这里是我的HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Store Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<nav class="navigation">
<div class="container">
<span class="title">
<i class="fa fa-home"></i> Store Dashboard
</span>
<span class="search-control" onclick="">
Log Out <a style="font-family:fontawesomqe;"></a>
</span>
</div>
</nav>
<div class="container">
<div class="search-box" id="SBox">
<input id="search" placeholder="Search..." type="text">
<div class="also search-link" onclick="" id="searchclick"></div>
</div>
</div>
<div class="container">
<table>
<tbody>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
</tr>
<tr>
<td>Example 6</td>
<td>Example 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这里是我的CSS：
@import url('http://fonts.googleapis.com/css?family=Cookie');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
*{margin:0px;padding:0px;}
body{
background-color:#eee;
}
.navigation {
background-color:#fff;
width:100%;
height:50px;
box-shadow: 0px 1px 1px #c8c8c8;
line-height:52px;
color:#62bb49;
}
.container {
width:760px;
margin:auto;
position: relative;
}
.title {
font-family:'Cookie';
font-size:32px;
cursor: pointer;
}
.search-control{
font-family:'Open Sans';
position: absolute;
right:0;
cursor: pointer;
color: #bbb;
}
.search-control:hover {color:#686868;}
.fa-home {
font-size:22px;
}
.search-box {
width:100%;
position: relative;
top:48px;
height:48px;
transition:opacity 0.4s linear ,visibility 0.4s linear 0s;
}
.search-box > #search {
width:640px;
height:48px;
border-radius:6px 0px 0px 6px;
box-shadow:none;
box-shadow: 1px 2px 2px #ddd;
}
input , input:focus {
border:none;
box-shadow:none;
background-color:none;
outline: 0;
font-size:16px;
font-family:'Open Sans';
color:#bbb;
padding:0px 12px;
}
.also {
font-family:'fontawesome';
color:#bbb;
display:inline-block;
background-color:#fff;
height:48px;
width:48px;
line-height: 48px;
text-align: center;
cursor: pointer;
border-left:1px solid #ddd;
position: absolute;
top:0;
box-shadow: 1px 2px 2px #ddd;
}
.search-link:hover {color:#686868;}
.setting {
border-radius:0px 6px 6px 0px;
margin-left:48px;
font-size:18px;
}
.setting:hover {color:#686868;}
.flat-table {
display: block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: auto;
}
th {
background-color: rgb(112, 196, 105);
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: rgb(238, 238, 238);
color: rgb(111, 111, 111);
padding: 20px 30px;
}
任何人都可以建议我做错了吗？
欢迎计算器，如果有任何的回答可以帮助你[投上一票（http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow），如果答案是什么您是否在寻找将其标记为[正确answe（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）为未来的读者。谢谢！ –