Question

我有一个博客 - http://www.blankesque.com。

我想将搜索栏与悬停导航栏合并，因此本质上搜索栏将位于导航栏的一部分。理想情况下，我希望搜索栏显示在所有选项卡/页面后的右侧。我有搜索栏及其附带的CSS编码所需的html编码，但我不明白我应该如何拼凑搜索栏的编码和导航栏的编码。下面我列出了整个导航栏的编码。

<div id='wctopdropcont'>
 <div id='wctopdropnav'>
     <ul>
       <li><a href='#'>Blankesque</a> 
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
         </ul></li>

<li class='social'><a href='#'>Follow</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:blankesque@hotmail.com'>Email</a></li>
</ul></li>

 <li><a href='#'>Categories</a>

         <ul>
              <li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
              <li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
           <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
              <li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
              <li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
           <li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
           <li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
              <li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
           <li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
       </ul>
</li>
       <li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li>

       <li><a href='#'>Search</a>

<div id='search' title='Type and hit enter'> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>  </form> </div>  
 <br/><br/> </li>

   </ul>

<div id='dptuh'>
<a href='http://www.blankesque.com'>Blankesque</a>
   </div>

</div></div>
<style>

#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:35px;
display:block;
padding: 0;
margin-left: -16px;

z-index:100;
top:0px;
left:0px;
position:fixed;

background:#ffffff;
opacity: 0.8;
filter: alpha(opacity=80);
  }
#wctopdropnav{ /* social */
float: right;
width:97%;
height:7px;
display:block;
padding:0;
margin-left:30px;
}

#wctopdropnav ul{
float:right;
margin:0;
padding:0;

}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:10px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active,   #wctopdropnav .current_page_item a  {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10px;
background:#ffffff;
color: #000000;
width: 88px;
margin: 0;
padding: 0 1px;
line-height: 20px;
position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
 z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:22px 0 0 0;
padding: 4px 0 0 0;
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
 left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
 position:static
}
#dptuh {
color: #000000;
text-transform: uppercase;
font-family: cantarell;
font-size: 14px!important;
display: block;
letter-spacing: 0.13em;
text-decoration: none;
margin: 0.9%;
  } 
#dptuh a {
font-weight: normal;
  }
#dptuh a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
  }
.social li:last-of-type{
margin: 2px 1px 0 0!important;
border-top:1px solid #e0e0e0;
display: block; 
}
.social li {
padding-left: 2px!important;
}
#search {  
border: 1px solid #cccccc;  
background: white url(http://i.picresize.com/images/2015/07/27/bO1L.jpg) 98% 50% no-repeat;  
text-align: center; 
padding: 4% 0 4% 0;  
width: 100%;  
height: 16px; mouse:pointer:  
}  
#search #s {  
background: none;  
color: #333333;  
font: cantarell 10px;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
letter-spacing: 0.09em;
border: 0;  
width: 10%;  
padding: 0;  
margin: 0;  
outline: none;  
}  

</style>

如果有人能帮我解决这个问题，我将不胜感激。提前谢谢。

IRAM

Answer 1

对您的css进行以下更改：

#search {
    border: 1px solid #cccccc;
    background: white url(http://i.picresize.com/images/2015/07/27/bO1L.jpg) 98% 50% no-repeat;
    text-align: center;
    /* padding: 4% 0 4% 0; */
    width: 100%;
    /* height: 16px; */
    mouse: pointer:;
    float: left;
    max-width: 110px;
}
#searchform {
     height: 20px;
}
#search #s {
   background: none;
   color: #333333;
   font: cantarell 10px;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: normal;
   letter-spacing: 0.09em;
   border: 0;
   /* width: 10%; */
   padding: 0;
   margin: 0;
   outline: none;
   position: relative;
   top: -8px;
   padding-left: 6px;
}

将搜索栏添加到导航栏

1 个答案: