試圖獲得導航欄下的搜索欄

我對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

試圖獲得導航欄下的搜索欄

回答

相關問題