如何解决Flex 1显示问题使用Reactjs创建Amazon clone应用
我在使用CSS属性“ flex:1;”时遇到显示问题。我正在按照一个教程使用Reactjs制作Amazon克隆应用程序。问题出在标题中,当搜索输入+搜索图标应向右伸展时,将覆盖此搜索“ div”和另一个具有链接的“ div”之间的所有可能空间。这是我的Header.js代码:
function Header() {
return (
<nav className="header">
<Link to="/">
<img className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt="amazon_logo" />
</Link>
<div className="header__search">
<input type="text" className="header__searchInput" />
<SearchIcon className="header__searchIcon" />
</div>
<div className="header__nav">
<Link to="/login" className="header__link">
<div className="header__option">
<span className="header__optionLineOne">Hello Chris</span>
<span className="header__optionLineTwo">Sign In</span>
</div>
</Link>
<Link to="/" className="header__link">
<div className="header__option">
<span className="header__optionLineOne">Returns</span>
<span className="header__optionLineTwo">& Orders</span>
</div>
</Link>
<Link to="/" className="header__link">
<div className="header__option">
<span className="header__optionLineOne">Your</span>
<span className="header__optionLineTwo">Prime</span>
</div>
</Link>
<Link to="/checkout" className="header__link">
<div className="header__optionBasket">
<ShoppingBasketIcon />
<span className="header__optionLineTwo header__basketCount">0</span>
</div>
</Link>
</div>
</nav>
)
}
export default Header
我的问题是关于className为“ header__search”的div,其中包括搜索输入和搜索图标。
这是我的CSS属性:
.header {
background-color: #131921;
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.header__logo {
width: 100px;
margin-left: 20px;
margin-right: 20px;
margin-top: 18px;
}
.header__search {
display: flex;
flex: 1;
}
.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}
.header__searchIcon {
background-color: #cd9042;
padding: 5px;
height: 22px !important;
} enter image description here
当我在“ .header__search”上显示flex更改为不显示任何内容时,如果我添加flex:1;搜索图标“ .header__searchIcon”,它会向右扩展,覆盖所有可用空间。我不明白为什么div无法做到这一点。我只是夸奖他们在本教程中所做的事情,但是没有相同的结果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。