如何让我的元素全部出现在一行上？答案

【问题标题】：How to can I make my elements appear all on one line?如何让我的元素全部出现在一行上？
【发布时间】：2014-02-13 21:48:39
【问题描述】：

我正在处理的网站的标题包含公司徽标和搜索栏。我希望徽标出现在右侧，搜索栏在左侧，填充剩余的可用空间。这是它目前的样子，你可以看到搜索栏已经下降到下一行：

这是代码：

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>

这是一个经过修改的图像，我希望它看起来像这样：

【问题讨论】：

我想你可以将导航栏的display 设置为inline-block，让它浮动并确保宽度不要太大
@cimmanon 是的，第二张图片的徽标旁边有搜索栏。
将来，如果您将示例代码精简到重现问题所需的最小量，这将非常有帮助。

标签： javascript html css header google-custom-search

【解决方案1】：

不是将徽标显示为图像，而是将其设置为导航栏内容背景，左对齐且不重复。然后将 navbar-content 的左内边距设置为足以将搜索栏推离背景图像。

【讨论】：

【解决方案2】：

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

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

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

好的，经过进一步的工作，我相信我已经成功了。请注意，我更改了一些 html 和一些不错的 css。我尝试使用 gist 来显示差异，但更改有点多，无论如何它至少将它们显示在同一个地方：

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

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

【讨论】：

我是个新手。我应该如何将该代码拼凑在一起以形成一个正常运行的文件？

【解决方案3】：

尝试将图像放在一个 div 中，然后将该 div 和搜索栏都向左浮动。

【讨论】：

【解决方案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;
}

【讨论】：