试图获得导航栏下的搜索栏

我对html，css，bootstrapping和一般的web开发都很陌生。我现在正在一个网站上工作，而且我正在使用bootstrap。在标题中，我想在导航栏的正下方添加google的搜索栏，但无论我做什么，都会显示错误。到目前为止，我已经得到了this，但我无法让它匹配长度或任何东西。请帮助，这是我的HTML代码到目前为止。试图获得导航栏下的搜索栏

<header class="container"> 
    <div class="row"> 
    <h1 class="col-sm-4" style="display: inline"><img src="../../Pictures/cips-logo-default.png"</img></h1> 
    <nav class="col-sm-8"> 
     <div class="row col-sm-10"> 
      <img src="homebutton.png"/> 
      <img src="aboutusbutton.png"/> 
      <img src="coursesbutton.png"/> 
      <img src="contactbutton.png"/> 
      <img src="faqbutton.png"/> 
      </div> 
     <div class="row"> 
     <script> 
     (function() { 
      var cx = '003882963998724515671:mwpl-rnunhm'; 
      var gcse = document.createElement('script'); 
      gcse.type = 'text/javascript'; 
      gcse.async = true; 
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(gcse, s); 
     })(); 
     </script> 
     <gcse:search></gcse:search> 
     </div> 
    </nav> 

    </div> 
</header>

这里是CSS

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
body{ 
 
\t font-family: "Lato"; 
 
\t font-weight: 300; 
 
\t background: ##ccd844; 
 
\t background-image: url("zenbg-1.png"), url("zenbg-2.png"); 
 
\t background-repeat: repeat-x, repeat; 
 
} 
 

 
header { 
 
    padding: 20px 0; 
 
} 
 

 
header .row, 
 
footer .row { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
header h1 { 
 
    font-weight: 700; 
 
    margin: 0; 
 
} 
 

 
header nav { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-wrap: wrap; 
 
    font-size: 18px; 
 
    -webkit-transition: margin 0.5s ease-out; 
 
    -moz-transition: margin 0.5s ease-out; 
 
    -o-transition: margin 0.5s ease-out; 
 
    transition: all 0.3s ease 0s; 
 
    margin-top: 60px; 
 
} 
 

 
header form { 
 
\t display: flex; 
 
    justify-content: flex-end; 
 
\t margin-left: 70px; 
 
} 
 

 
header nav img:hover { 
 
    margin-top: 2px; 
 
} 
 

 
header p { 
 
    padding: 0 20px; 
 
    margin: 0; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title>The Knowledge Enterprise</title> 
 
     <meta charset="utf-8" /> 
 
    
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
     <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> 
 
     <link rel="stylesheet" type="text/css" href="main.css"> 
 
    </head> 
 
    
 
    <body> 
 
     <header class="container"> 
 
     <div class="row"> 
 
      <h1 class="col-sm-4" style="display: inline"><img src="http://i.imgur.com/FsPDZRt.png"</img></h1> 
 
      <nav class="col-sm-8"> 
 
       <div class="row col-sm-10"> 
 
       <img src="http://i.imgur.com/hbiK5vO.png"/> 
 
       <img src="http://i.imgur.com/jjXEktQ.png"/> 
 
       <img src="http://i.imgur.com/XOXEfiJ.png"/> 
 
       <img src="http://i.imgur.com/YHtenII.png"/> 
 
       <img src="http://i.imgur.com/Eld0eGQ.png"/> 
 
       </div> 
 
      <div class="row"> 
 
     <div class="col-sm-8 col-sm-offset-4"> 
 
\t \t \t <script> 
 
      (function() { 
 
      var cx = '003882963998724515671:mwpl-rnunhm'; 
 
      var gcse = document.createElement('script'); 
 
      gcse.type = 'text/javascript'; 
 
      gcse.async = true; 
 
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
 
      var s = document.getElementsByTagName('script')[0]; 
 
      s.parentNode.insertBefore(gcse, s); 
 
      })(); 
 
      </script> 
 
      <gcse:search></gcse:search> 
 
     </div> 
 
    </div> 
 
      </nav> 
 
      
 
     </div> 
 
     </header>

来源

2016-08-03 Femi Oyenusi

1.在第3行你的形象标签被打破...... 2.请尽量让你codesnippet工作，这样我们就可以在你的代码与实际输出的帮助找出问题.. – andreas

不知道图片标签有什么问题，但我认为codesnippet现在的作品 –

你的是''。正确的是：''。 – andreas

我并不确切地知道你的脚本作品，但试图将其他分区适当类名内包裹脚本以相同的方式对齐内容。

<div class="row"> 
    <h1 class="col-sm-4" style="display: inline"><img src="http://i.imgur.com/FsPDZRt.png"</img></h1> 
    <nav class="col-sm-8"> 
     <div class="row col-sm-10"> 
      <img src="http://i.imgur.com/hbiK5vO.png" /> 
      <img src="http://i.imgur.com/jjXEktQ.png" /> 
      <img src="http://i.imgur.com/XOXEfiJ.png" /> 
      <img src="http://i.imgur.com/YHtenII.png" /> 
      <img src="http://i.imgur.com/Eld0eGQ.png" /> 
     </div> 
    </nav> 
</div> 
<div class="row"> 
    <div class="col-sm-8 col-sm-offset-4"> 
     <script> 
      (function() { 
       var cx = '003882963998724515671:mwpl-rnunhm'; 
       var gcse = document.createElement('script'); 
       gcse.type = 'text/javascript'; 
       gcse.async = true; 
       gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
       var s = document.getElementsByTagName('script')[0]; 
       s.parentNode.insertBefore(gcse, s); 
      })(); 
     </script> 
     <gcse:search></gcse:search> 
    </div> 
</div>

来源

2016-08-03 16:16:43 Korte

不幸的是，这并没有改变任何东西，这东西让我感到非常困惑。 –

更改了我的答案。再试一次 – Korte

试图获得导航栏下的搜索栏

回答

相关问题