如何將我的元素全部顯示在同一行上？

-1

我正在處理的網站的標題包含公司徽標和搜索欄。我希望徽標顯示在右側，搜索欄位於左側，填充剩餘的可用空間。下面是它目前的樣子，你可以看到搜索欄已經下降到下一行：如何將我的元素全部顯示在同一行上？

enter image description here

而這裏的代碼：

HTML：

<p class="body-one"> 
     <div id="navbar"> 
      <div id="navbar-content"> 
        <img src="http://i.imgur.com/SsSkZjU.png"> 
         <script id="search-function"> 
          (function() { 
          var cx = '008943255139580210842:rssvb04mkxs'; 
          var gcse = document.createElement('script'); 
          gcse.type = 'text/javascript'; 
          gcse.async = true; 
          gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
           '//www.google.com/cse/cse.js?cx=' + cx; 
          var s = document.getElementsByTagName('script')[0]; 
          s.parentNode.insertBefore(gcse, s); 
          })(); 
         </script> 
         <gcse:search></gcse:search> 
        </div> 
       <ul> 
       <li><b><a href="http://www.chaotixstudios.x10.mx/home.html">Chaotix Studios, LLC. - Since 2012</b></li> 
       <li><a href="http://www.chaotixstudios.x10.mx"><u>Home</u></a></li> 
       <li><a href="http://www.chaotixstudios.x10.mx/games.html"><u>Games & Gaming</u></a></li> 
       <li><a href="http://www.chaotixstudios.x10.mx/social.html">Social Media</a></li> 
       <li><a href="http://www.chaotixstudios.x10.mx/contact.html">Contact Us</a></li> 
       <li><a href="http://www.chaotixstudios.x10.mx/products.html">Products</a></li> 
       <div id="search"> 
       </div> 
      </ul> 
     </div>

CSS：

<div id="whole"> 
<head> 
    <style type="text/css"> 
     <!-- 

     #navbar ul 
     { 
      margin: 7px; 
      padding: 5px; 
      list-style-type: none; 
      text-align: left; 
      background-color: #000; 
      font-family:Tahoma; 
     } 

      #navbar ul li { 
      display: inline; 

     } 

      #navbar ul li a { 
      text-decoration: none; 
      padding: .2em 1em; 
      color: #666666; 
      background-color: #000; 
     } 

      #navbar ul li a:hover 
     { 
      color: #000; 
      background-color: #949494; 

     } 
      #navbar b 
     { 
      color:#666666; 
     } 
      p.footer-one 
     { 
      text-align:Center; 
      font-family:Tahoma; 
      font-size:14px; 
     } 
      p.body-two 
     { 
      font-family:Tahoma; 
     } 
      p.footer-two 
     { 
      font-family:Tahoma; 
      font-size:10px; 
      color:#B8B8B8; 
      text-align:center; 
     } 
      #search-function 
     { 
      float:center; 
     } 
     --> 
    </style> 
</head>

這是想什麼我它看起來像一個篡改圖像：

enter image description here

來源

2014-02-13 yozo67

，我想你可以在導航欄的'display'設置爲'直列block'，浮動的權利，並確保寬度是不是太大 – cubrr

@cimmanon是的，第二個圖像的徽標旁邊有搜索欄。 – yozo67

將來，如果將示例代碼剝離到重現問題所需的最小數量，那將非常有用。 – cimmanon

，而不是顯示標誌爲圖像，將其設置爲導航欄，內容背景，留下沒有重複排列。然後將navbar-content左側填充設置爲足以將搜索欄從背景圖像上移開。

來源

2014-02-13 22:05:45 Eeji

您可以使用圖像作爲背景圖片，這會讓您近距離，但我不確定是否可以在沒有柔性盒的情況下將其完全調整大小。我還在玩了，你可以在這裏看到：

http://codepen.io/anon/pen/wCdBa

（請注意，爲便於我取代了谷歌的搜索代碼用一個簡單的搜索輸入有可能與代碼的問題是谷歌注入以及）

好吧，經過一些進一步的工作，我相信我有它的工作。請注意，我改變了一些html和一點點的CSS。我試圖用一個要點顯示的diff，但變化是有點多，無論如何它至少說明他們在同一個地方：

https://gist.github.com/whoughton/8985343/revisions

最後的意見，改變圍繞使用圖像作爲背景，並轉移到邊界框大小和關閉我的頭頂我不確定邊界框大小的兼容性列表。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing說你應該與「現代」瀏覽器合理的形狀。

來源

2014-02-13 22:20:13 whoughton

我是一個新手，當涉及到這個東西。我應該如何將該代碼拼湊在一起才能形成一個功能正常的文件 – yozo67

嘗試把圖像放在一個div中，並浮動div和搜索欄左邊。

來源

2014-02-13 22:50:06

您需要通過浮動或絕對定位將圖像移出文檔的正常流程。我在這裏選擇了絕對定位，使得圖像可以被垂直居中：

http://codepen.io/cimmanon/pen/hobFc

#navbar-content { 
    position: relative; 
} 
#navbar-content img { 
    /* 100 x 31 */ 
    /* this is for vertical centering */ 
    position: absolute; 
    top: 50%; 
    margin-top: -15px; 
} 
/* not sure if this div is named dynamically or not */ 
#navbar-content #search-function + div { 
    margin-left: 100px; /* the width of the image, add a little extra if you want */ 
    border: 1px solid; 
}

來源

2014-02-14 15:15:44 cimmanon

如何將我的元素全部顯示在同一行上？

回答

相關問題