【发布时间】：2021-02-20 22:39:24
【问题描述】：
我用 CSS 网格制作了一个搜索框，当您缩小页面时它会缩小。但是，由于某种原因，它不会像我认为的那样缩小。
这是完全扩展的样子：
这是缩小后的样子：
如何使搜索栏的宽度随页面缩小到足以使搜索按钮不会切换到按钮？
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" className="form-control" />
<button className="searchBtn">o</button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
导航栏.css
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
【问题讨论】：
-
如果没有可运行的示例，很难准确地说。但有时
input元素有一个min-width属性集。 -
@EmielZuurbier 有没有一种快速的方法可以让它成为一个可运行的例子？我是新手
-
因为它是一个反应应用程序，您可以使用codesandbox 或创建stack-snippet 以将代码保留在页面上。后者有偏好，但前者可能更熟悉设置。否则，链接到实时示例也是可以接受的。
-
可能是这篇文章的副本：stackoverflow.com/q/42421361/3597276
标签： javascript css reactjs css-grid