问题： 我的导航项目右侧需要一个搜索栏，但它不想转到右侧。
HTML（PHP）：
<!-- HEADER
================================================== -->
<header class="header-type-5">
<div class="background-header"></div>
<div class="slider-header">
<!-- Top of pages -->
<div id="top" class="<?php if($theme_options->get( 'header_layout' ) == 1) { echo 'full-width'; } elseif($theme_options->get( 'header_layout' ) == 4) { echo 'fixed3 fixed2'; } elseif($theme_options->get( 'header_layout' ) == 3) { echo 'fixed2'; } else { echo 'fixed'; } ?>">
<div class="background-top"></div>
<div class="background">
<div class="shadow"></div>
<div class="pattern">
<div class="container">
<div class="row">
<!-- Header Left -->
<div class="col-sm-4" id="header-left">
<?php if ($logo) { ?>
<!-- Logo -->
<div class="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>
</div>
<!-- Header Right -->
<div class="col-sm-8" id="header-right">
<?php
$top_block = $modules->getModules('top_block');
if( count($top_block) ) {
foreach ($top_block as $module) {
echo $module;
}
} ?>
<?php echo $currency.$language; ?>
<!-- <a href="<?php echo $account; ?>" class="my-account"><i class="fa fa-user"></i></a> -->
<div class="links">
<a class="l-a" href="index.php?route=account/account">Mijn Account</a>
<a class="l-s" href="index.php?route=checkout/cart">Winkelwagen</a>
<a class="l-c" href="index.php?route=checkout/checkout">Afrekenen</a>
</div>
<?php echo $cart; ?>
</div>
</div>
</div>
<style>
.sexy_line {
height: 1px;
background: white;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#222222), to(#222222), color-stop(50%, white));
}
</style>
<div class="sexy_line"></div>
<?php if($theme_options->get( 'megamenu_type' ) == 4 || $theme_options->get( 'megamenu_type' ) == 5 || $theme_options->get( 'megamenu_type' ) == 6 || $theme_options->get( 'megamenu_type' ) == 9 || $theme_options->get( 'megamenu_type' ) == 14 || $theme_options->get( 'megamenu_type' ) == 19 || $theme_options->get( 'megamenu_type' ) == 29) { ?>
<div class="container container-megamenu2">
<?php } ?>
<?php
$menu = $modules->getModules('menu');
if( count($menu) ) { ?>
<div class="megamenu-background">
<div class="">
<div class="overflow-megamenu container">
<?php
if(count($menu) > 1) echo '<div class="row mega-menu-modules">';
$i = 0;
foreach ($menu as $module) {
if($i == 0 && count($menu) > 1) echo '<div class="col-md-3">';
if($i == 1 && count($menu) > 1) echo '<div class="col-md-9">';
echo $module;
if(count($menu) > 1 && ($i == 0 || $i == 1)) echo '</div>';
if(count($menu) > 1 && $i == 1) echo '</div>';
$i++;
} ?>
</div>
</div>
</div>
<?php } elseif($categories) { ?>
<div class="megamenu-background">
<div class="">
<div class="overflow-megamenu container">
<div class="container-megamenu horizontal">
<div class="megaMenuToggle">
<div class="megamenuToogle-wrapper">
<div class="megamenuToogle-pattern">
<div class="container">
<div><span></span><span></span><span></span></div>
Navigation
</div>
</div>
</div>
</div>
<div class="megamenu-wrapper">
<div class="megamenu-pattern">
<div class="container">
<ul class="megamenu shift-up">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="with-sub-menu hover"><p class="close-menu"></p><p class="open-menu"></p>
<a href="<?php echo $category['href'];?>"><span><strong><?php echo $category['name']; ?></strong></span></a>
<?php } else { ?>
<li>
<a href="<?php echo $category['href']; ?>"><span><strong><?php echo $category['name']; ?></strong></span></a>
<?php } ?>
<?php if ($category['children']) { ?>
<?php
$width = '100%';
$row_fluid = 3;
if($category['column'] == 1) { $width = '220px'; $row_fluid = 12; }
if($category['column'] == 2) { $width = '500px'; $row_fluid = 6; }
if($category['column'] == 3) { $width = '700px'; $row_fluid = 4; }
?>
<div class="sub-menu" style="width: <?php echo $width; ?>">
<div class="content">
<p class="arrow"></p>
<div class="row hover-menu">
<?php for ($i = 0; $i < count($category['children']);) { ?>
<div class="col-sm-<?php echo $row_fluid; ?> mobile-enabled">
<div class="menu">
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>" class="main-menu"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
<!-- Search -->
<div class="search_form">
<div class="button-search"></div>
<input type="text" class="input-block-level search-query" name="search" placeholder="<?php echo str_replace('...', '', $search); ?>" id="search_query" value="" />
<?php if($theme_options->get( 'quick_search_autosuggest' ) != '0') { ?>
<div id="autocomplete-results" class="autocomplete-results"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#search_query').autocomplete({
delay: 0,
appendTo: "#autocomplete-results",
source: function(request, response) {
$.ajax({
url: 'index.php?route=search/autocomplete&filter_name=' + encodeURIComponent(request.term),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item.name,
value: item.product_id,
href: item.href,
thumb: item.thumb,
desc: item.desc,
price: item.price
}
}));
}
});
},
select: function(event, ui) {
document.location.href = ui.item.href;
return false;
},
focus: function(event, ui) {
return false;
},
minLength: 2
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
});
</script>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
<?php if($theme_options->get( 'megamenu_type' ) == 4 || $theme_options->get( 'megamenu_type' ) == 5 || $theme_options->get( 'megamenu_type' ) == 6 || $theme_options->get( 'megamenu_type' ) == 9 || $theme_options->get( 'megamenu_type' ) == 14 || $theme_options->get( 'megamenu_type' ) == 19 || $theme_options->get( 'megamenu_type' ) == 29) { ?>
</div>
<?php } ?>
<?php
$menu2 = $modules->getModules('menu2');
if( count($menu2) ) {
echo '<div class="overflow-menu2">';
foreach ($menu2 as $module) {
echo $module;
}
echo '</div>';
} ?>
</div>
</div>
</div>
</div>
<?php $slideshow = $modules->getModules('slideshow'); ?>
<?php if(count($slideshow)) { ?>
<!-- Slider -->
<div id="slider" class="<?php if($theme_options->get( 'slideshow_layout' ) == 1) { echo 'full-width'; } elseif($theme_options->get( 'slideshow_layout' ) == 4) { echo 'fixed3 fixed2'; } elseif($theme_options->get( 'slideshow_layout' ) == 3) { echo 'fixed2'; } else { echo 'fixed'; } ?>">
<div class="background-slider"></div>
<div class="background">
<div class="shadow"></div>
<div class="pattern">
<?php foreach($slideshow as $module) { ?>
<?php echo $module; ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</header>
（＆＃34; search_form＆＃34; div不起作用）
CSS部分：
/* @group Search */
@media(max-width: 991px){
#top .search_form {
padding: 0px;
padding-top:0px;
vertical-align: top;
width: 100%;
position: absolute;
display: none;
}
#top .search_form input {
padding: 11px 35px 10px 20px;
margin: 0px;
height: 40px;
width: 230px;
font-size: 12px;
display: none;
}
.search_form .button-search,
.search_form .button-search2 {
font-family: FontAwesome;
position: absolute;
right: 45px;
top: 10px;
cursor: pointer;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: none;
}
}
#top .search_form {
margin: 6px 26px 0px 0px;
padding: 0px;
display: inline-block;
vertical-align: top;
width: 170px;
position: absolute !important;
right:0px;
}
.header-type-2 #top .search_form {
width: auto !important;
max-width: 270px;
display: block;
}
#top .search_form input {
padding: 11px 35px 10px 20px;
margin: 0px;
height: 40px;
width: 230px;
font-size: 12px;
}
.search-type-2 #top .search_form input {
-webkit-box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
-moz-box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
}
.search-type-3 #top .search_form input {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.search-type-4 #top .search_form input {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.search-type-5 #top .search_form input {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.search-type-7 #top .search_form input {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.search-type-6 #top .search_form input {
-webkit-box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
}
.search_form .button-search,
.search_form .button-search2 {
font-family: FontAwesome;
position: absolute;
right: 45px;
top: 10px;
cursor: pointer;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.search_form .button-search:before,
.search_form .button-search2:before {
content: "\f002";
}
/* @end */
我希望有人知道造成这个问题的原因。
提前致谢