【发布时间】：2018-03-23 06:51:15
【问题描述】：
我的导航栏有点麻烦。出于某种我无法弄清楚的原因，当有人单击搜索按钮时打开的框超出了窗口边缘。
此处提供完整示例：https://codepen.io/NaughtySquid/pen/MEXGpM
这是完整的代码，首先是 HTML：
<nav class="navigation-main">
<div class="container group">
<div class="right-menu">
<div id="search-button" class="toggle-nav search-box">
<a href="#"><img src="http://worldartsme.com/images/search-button-clipart-1.jpg" width="14" height="14" alt="" /></a>
<div class="toggle-content">
<form method="get" action="{:url}index.php?module=search">
<input type="hidden" name="module" value="search" /> Search <input type="text" class="search-field ays-ignore" name="q" placeholder="Search Articles…" />
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" />
</form>
</div>
</div>
</div>
</div>
</nav>
这是 CSS：
body {
background: #ffffff;
color: #404040;
font-family: 'Ubuntu', sans-serif;
margin: 47px auto;
padding: 0px;
word-wrap: break-word;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 999;
background-color: #222;
margin: 0 !important;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-search {
padding: 9px 0;
margin-right: 5px;
}
.header-search .search-field {
width: 200px;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
/* toggle menus */
.right-menu{float: right; right: 0px;}
.toggle-content
{
display: none;
white-space: nowrap;
position: absolute;
right: 0;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
word-wrap: normal;
z-index: 999999;
}
.toggle-active {display: block;}
.toggle-content ul
{
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
color: #999;
}
.toggle-content li
{
margin: 0;
padding: 0;
}
.toggle-content a
{
display: block;
color: #999;
padding: 5px
!important;
}
.toggle-content a:hover {color: #fff;}
/* search box */
.search-box {float: left; color: #999; line-height: 29px; background-color: #383838;}
.search-box:hover{background-color: #4B4B4B;}
.search-box a {padding: 10px; height: 29px; display: block; color: #999;}
.search-box:hover{cursor: pointer;}
#search-button .toggle-content {width: 100%; border-top: 1px solid black; text-align: center; left: 0px;}
input, textarea, select {
background: #fcfcfc;
border: 1px solid #ddd;
color: #444444;
margin-bottom: 7px;
padding: 7px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: .2em;
}
最后是 JQuery：
$(document).ready(function() {
$(document).on("click", ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this)
.closest(".toggle-nav")
.children(".toggle-content");
if ($toggle.hasClass("toggle-active")) {
$($toggle).removeClass("toggle-active");
} else {
$(".toggle-content").removeClass("toggle-active");
$($toggle).addClass("toggle-active");
}
});
$(document).click(function(e) {
if (
!$(e.target).is("#search-button .toggle-content .search-field") &&
!$(e.target).is("#search-button .toggle-content")
) {
$(".toggle-content").removeClass("toggle-active");
}
});
});
我真的希望内容与屏幕边缘完美结合。
过去两天我一直在使用 firefox 检查器，切换和调整东西，但我无法确定是什么推动了它。
【问题讨论】：
-
它是正确的，该字段是 100% 但是您将搜索文本放在它旁边，所以字段会消失
-
如果您删除“搜索”文本，它仍会扩展超出窗口边缘。文字不是问题。
-
不，如果您删除输入的填充
-
<div class="toggle-content toggle-active">这个元素四周有 5px 的内边距 -
看我的回答，我放了 width: calc(100% - 80px) - 80px 或多或少是搜索词的宽度...