Javascript 元素在调整大小时保持离开Div_Javascript_Css_Html_Forms

Javascript 元素在调整大小时保持离开Div

javascript css html forms

Javascript 元素在调整大小时保持离开Div,javascript,css,html,forms,Javascript,Css,Html,Forms,我一直在四处寻找，我还没有找到任何关于我的具体案例的答案。我想让搜索表单与页面右侧对齐，但它始终与所在的div对齐。我已经求助于绝对定位，但我更愿意找到一种更干净的方法来实现这一点，而不必不断更改样式“顶部：；”的值以下是代码的链接：下面是一个片段： CSS: /*----切换按钮-----*/ .切换导航{ 显示：无； } .切换导航按钮{ 颜色：#FFF；填充：12px；过渡：颜色0.3s；最大宽度：45px；游标：默认值； -webkit触摸标注：无； -webkit用户选择

我一直在四处寻找，我还没有找到任何关于我的具体案例的答案。我想让搜索表单与页面右侧对齐，但它始终与所在的div对齐。我已经求助于绝对定位，但我更愿意找到一种更干净的方法来实现这一点，而不必不断更改样式“顶部：；”的值

以下是代码的链接：

下面是一个片段：

CSS:

/*----切换按钮-----*/
.切换导航{
显示：无；
}
.切换导航按钮{
颜色：#FFF；
填充：12px；
过渡：颜色0.3s；
最大宽度：45px；
游标：默认值；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.切换导航按钮：悬停{
颜色：0d2c87；
背景色：#909f8e；
-webkit过渡：背景。4s轻松；
-moz过渡：背景。4s轻松；
-ms过渡：背景。4s轻松；
-o-过渡：背景。4s轻松；
过渡：背景。4s轻松；
}
@媒体屏幕和屏幕（最大宽度：970px）{
.切换导航{
浮动：左；
显示：内联块；
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
颜色：#FFF；
字号：18px；
文字装饰：无；
}
.主动{
显示：无；
}
}
/*--切换按钮结束--*/
/*----主导航CSS----*/
/*颜色：#0d2c87#7E8F7C |http://www.hexcolortool.com/7E8F7C#909f8e | */
.菜单{
背景色：#7E8F7C；
高度：48px；
宽度：100%；
}
导航ul{
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
}
李海军{
浮动：左；
保证金：0；
填充：0；
位置：相对位置；
最大宽度：190px；
宽度：100%；
}
导航a{
背景：#7E8F7C；
颜色：#FFF；
显示：块；
字体：16px/48px无衬线；
文本对齐：居中；
文字装饰：无；
}
.头李：悬停{
背景：#909f8e；
颜色：0d2c87；
-webkit过渡：背景。4s轻松；
-moz过渡：背景。4s轻松；
-ms过渡：背景。4s轻松；
-o-过渡：背景。4s轻松；
过渡：背景。4s轻松；
}
导航李：悬停a{
背景：#909f8e；
颜色：0d2c87；
-webkit过渡：背景。4s轻松；
-moz过渡：背景。4s轻松；
-ms过渡：背景。4s轻松；
-o-过渡：背景。4s轻松；
过渡：背景。4s轻松；
}
纳夫利乌尔{
浮动：左；
左：0；
不透明度：0；
位置：绝对位置；
顶部：35px；
可见性：隐藏；
z指数：11；
-webkit过渡：全部。4s轻松；
-moz过渡：全部。4s轻松；
-ms过渡：全部。4s轻松；
-o型过渡：全部。4s轻松；
过渡：全部。4s轻松；
}
李海军：悬停{
不透明度：1；
顶部：48px；
能见度：可见；
}
李宇利{
浮动：无；
}
导航：悬停{
背景：#909f8e；
}
/*--主导航CSS端--*/
/*---导航搜索栏---*/
.查册表格{
显示：内联块；
位置：相对位置；
边缘顶部：8px；
右边距：8px；
浮动：对；
}
.搜索表格输入{
宽度：200px；
高度：30px；
填充：0px 8px；
字体大小：13px；
浮动：左；
}
.搜索表单输入：悬停，
输入：焦点{
边界顶部：1个山脊#3292E0；
边界底部：1px山脊#3292E0；
左边框：1个山脊#3292E0；
}
.搜索表单按钮{
高度：30px；
/*#66a992#0d2c87*/
颜色：#FFF；
边界：无；
填充物：5px；
背景色：#0d2c87；
}
.搜索表单按钮：悬停{
不透明度：0.8；
-webkit转换：不透明度。4s轻松；
-moz过渡：不透明度。4s缓解；
-ms转换：不透明度。4s缓解；
-o型过渡：不透明度。4s缓解；
过渡：不透明；
}
.从drop中搜索{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：1250px）{
.搜索表格输入{
宽度：120px；
}
.主动搜索{
显示：无；
}
.从drop中搜索{
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：1125px）{
.查册表格{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：840像素）{
.查册表格{
显示：内联块；
右：5%；
位置：绝对位置；
顶部：72px；
}
.查册表格{
浮动：左；
}
}
















































☰














搜索🔍；

您可以尝试将表单放置在导航标签的外部

<nav class="menu"> <ul class="active"> <li> <a class="header-li" href="">Home</a> </li> <li> <a class="header-li" href="">Our Company</a> <ul> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> </ul> </li> <li> <a class="header-li" href="">Services</a> <ul> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> </ul> </li> <li> <a class="header-li" href="">Products</a> <ul> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> </ul> </li> <li> <a class="header-li" href="">Resources</a> <ul> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> <li><a href="">Blank</a></li> </ul> </li> </ul> <ul class="toggle-nav"> <li> <div class="toggle-nav-button" href="#">☰</div> <ul> <li><a href="">Home</a></li> <li><a href="">Our Company</a></li> <li><a href="">Services</a></li> <li><a href="">Products</a></li> <li><a href="">Resources</a></li> </ul> </li> </ul> </nav> <form class="search-form"> <input type="text"> <button><span class="active-search">Search</span><span class="search-from-drop">🔍</span></button> </form>