时间戳

首页 > 解决方案 > CSS 搜索栏无响应

html - CSS 搜索栏无响应

问题描述

在继续使用 JS 之前，我正在使用 HTML 和 CSS 制作响应式 GitHub 主页克隆 ( https://github.com/ )。我目前正在研究搜索栏。但是，当我从左侧缩小屏幕时，搜索栏宽度保持不变，导致搜索栏离开整个左侧导航栏。任何帮助将不胜感激:) PS请查看完整页面视图的代码片段

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f6f8fa;
    font-family: Helvetica, sans-serif;
}

#left-menu {
    background-color: white;
    width: 25%;
    display: flex;
    flex-direction: column;    
}

#left-menu-items {
    margin: 40px 15px 300px 25px;
    width: 85%;
}

#left-menu input {
    background-color: transparent;
    border: solid 1px #e1e4e8;
    border-radius: 5px;
    outline: none;
    margin-bottom: 20px;
    padding: 8px 113px 8px 10px;
}

#left-menu input::placeholder {
    color: #d2d5d8;
    font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>GitHub Homepage</title>
</head>
<body>
    <section id="left-menu">
        <div id="left-menu-items">
            <input type="search" placeholder="Find a repository...">
        </div>
    </section>
</body>
</html>

标签： htmlcssflexbox

解决方案

我正在处理的元素是显示“查找存储库...”的搜索栏为了让框向右伸展，我添加了大量的填充。

嗨，约书亚。

在这种情况下，提出一个包含这么多部分的问题很难回答。如果您可以创建一个较小的示例 - 它可能会有所帮助。

<aside class="sidebar">
  <input type="search" placeholder="Find  a repository">
</aside>

.

.sidebar {
  border: 1px solid blue;
  padding: 10px;
}

input[type='search'] {
  padding: 5px 10px;
  font-style: innherit;
}

https://jsfiddle.net/sheriffderek/smnovwqj/

从那里 - 我们可以帮助你。您也可以随时在CSS Discord中提问。

这里：使用侧边栏：https ://jsfiddle.net/sheriffderek/e6k8gydu/

推荐阅读