gpt4 book ai didi

html - CSS 搜索栏无响应

转载 作者:行者123 更新时间:2023-12-04 09:35:41 25 4
gpt4 key购买 nike

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

* {
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>

最佳答案

The element I'm working on is the search bar that says "Find arepository..." In order to allow the box to stretch to the right, I'veadded a ton of padding.


嗨,约书亚。
在这种情况下,提出一个包含这么多部分的问题是很难回答的。如果您可以创建一个较小的示例 - 它可能会有所帮助。
<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/

关于html - CSS 搜索栏无响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62605185/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com