Question

我正在尝试制作一个简单的搜索表单。它有一个搜索栏和一张桌子。在一些搜索查询后，表格会被弹出。但对我来说，这两个因素相互影响。

这是我的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;
}

有人能说出我做错了吗？

Answer 1

在.search-box top: 48px，您margin-top: 48px;将其更改为.search-box { width: 100%; position: relative; margin-top: 48px; height: 48px; transition: opacity 0.4s linear, visibility 0.4s linear 0s; }

如果您希望元素对周围元素没有影响，您可以使用定位（绝对，相对）以及顶部，底部，左侧和右侧。

如果您希望元素被推开或靠近其他周围元素，请使用边距。

@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;
  margin-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;
}

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

<body>

Answer 2

您在元素position: relative上设置.search-box，然后设置top: 48px。这会将搜索框向下移动到表所占用的空间。

相反，请使用margin-top或margin-bottom在这些元素之间添加空格。

HTML CSS元素相互交叉

2 个答案: