html - 最小化页面时如何修复css中的菜单栏和容器

Question

看图，我不知道真正的问题是什么。

带有按钮的搜索栏和带有“PROFILE”文本的框给我一个问题

.profile{
width: 300px;
height: 300px;
background-color: white;
border: 1px solid lightgrey;
border-radius: 5px; 
position: absolute;
right: 50px;
top: 80px;
}
.srch{
width: 500px;
height: 30px;    
border-radius: 2px;
border: 1px solid white;
margin-left: 150px;
padding-left: 8px;
}
.sub{
background: none;
border: 2px solid red;
border-radius: 2px;
color:white;
font-weight: bold;
font-size: 14px;
width: 100px;
height: 35px;    
}

标签： htmlcss

Answer 1

考虑在 HTML 中使用 CSS，你为什么不尝试使用 Bootstrap？它真的很有用，它可以在调整窗口大小时正确调整元素的大小和重新定位。它会做出响应。您可以使用它的类（如 ）来做到这一点。在这里，观看布局网格文档，它应该可以解决您的问题

https://getbootstrap.com/docs/4.3/layout/grid/