Question

我正在处理的网站标题包含公司徽标和搜索栏。我希望徽标显示在右侧，搜索栏位于左侧，填充剩余的可用空间。以下是目前的情况，您可以看到搜索栏已下降到下一行：

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

Answer 1

不是将徽标显示为图像，而是将其设置为导航栏内容背景，左对齐而不重复。然后将导航栏内容左侧填充设置为足以将搜索栏推离背景图像。

Answer 2

您可以将图像用作背景图像，这将使您接近，但我不确定您是否可以在没有Flexbox的情况下将其完全重新调整大小。我还在玩它，你可以在这里看到：

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

（请注意，为方便起见，我使用简单的搜索输入替换了谷歌搜索代码。可能也是谷歌注入的代码的问题）

好的，经过一些进一步的工作，我相信我有它的工作。请注意，我更改了一些html和一些不错的CSS。我试图用一个要点来展示差异，但变化有点多，无论如何它至少在同一个地方显示它们：

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

最终评论，更改围绕使用图像作为背景，并转移到边框大小和我的头顶，我不确定边框大小的兼容性列表。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing说你应该使用“现代”浏览器处于合理的状态。

Answer 3

尝试将图像放入div并浮动该div和搜索栏。

Answer 4

您需要通过浮动或绝对定位将图像移出文档的正常流程。我在这里选择绝对定位，以便图像可以垂直居中：

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;
}

如何让我的元素全部显示在一行？

4 个答案: