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

问题描述 投票:0回答:3

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

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

enter image description here

.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;    
}
html css css3
3个回答
0
投票

使用:

vertical-align: top;

对于文本


0
投票

thinkind CSS用于HTML,为什么不尝试使用Bootstrap?它非常有用,它可以在调整窗口大小时正确调整元素的大小和重新定位。并且它做出了回应。你可以使用它的类(如)来做到这一点。在这里,观看布局网格文档,它应该适用于您的问题

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


0
投票

我没有得到你,

下面的代码使用seacrch按钮保持搜索栏。如果要将搜索栏放在配置文件列的上方,请确保它在列中。并删除位置:absolute;财产及其权利:;和顶部:;也。使用float:right;

.srch{
      position:relative;
     }

 .sub{
     position:absolute;
     top:0;
     right:0;
    }

有任何疑问,请不要犹豫。

© www.soinside.com 2019 - 2024. All rights reserved.