Question

所以我正在开发一个带有简单html和CSS的小搜索菜单。我正在使用百分比来适应我的元素，但它们似乎重叠，在我的脑海中，我会认为它们很好地融合在一起。有什么我做错了吗？

public function getServiceLocator()
{
    return $this->serviceLocator;
}

Answer 1

这里的主要罪魁祸首是padding上的.search-menu-list input：

.search-menu-list input {
  padding: 0 4px 0 4px;
}

通过将其与另一个<div class="input-wrap">包装在一起，可以更好地实现这一点，并提供以下样式：

.search-menu-list .input-wrap {
  padding: 0 4px 0 4px;
}

.search-menu-list .input-wrap input {
  padding: 0;
}

对于height无法正常工作，您已对容器使用固定高度（600px），并且您将height: 100%添加到列表中。所以给：

.search-menu-list {
  height: 550px;
  width: 100%;
}

将来，添加它可以：

* {box-sizing: border-box;}

这主要是因为将width: 100%，border和padding加在一起。

在<div>之前，你有</div>，</div>。

这是因为盒子模型。检查输出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="normalize.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style media="screen">
      * {box-sizing: border-box;}
      body {
        font-family: sans-serif;
        padding: 5px
      }
      .search-menu {
        height: 600px;
        background: #00003b;
        width: 500px;
        border: 1px solid black;
        padding: 5px
      }
      .search-menu-list {
        height: 550px;
        width: 100%;
      }
      .search-menu-list input {
        width: 100%;
        height: 30px;
        font-size: 16px;
        margin-bottom: 5px;
        padding: 0 4px 0 4px;
      }
      .search-menu-list ul {
        list-style: none;
        margin: 0; border: 0; padding: 0;
        overflow: hidden;
        overflow-y: scroll;
        background: white;
        width: 100%; height: 100%;
        border: 1px solid black;
      }
      .search-menu-list li {
        padding: 10px 5px 10px 5px;
        margin: -1px -1px 0 -1px;
        border-top: 1px solid black;
        -ms-user-select: none;
        cursor: default;
      }
      .search-menu-list li:hover {
        background: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <div class="search-menu">
      <div class="search-menu-list">
        <input placeholder="Start typing to search...">
        <ul>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
          <li>This is a test list item</li>
        </ul>
      </div>
    </div>
  </body>
</html>

预览

小提琴：http://output.jsbin.com/wimeqazusi

元素与CSS无法正确匹配

2 个答案: