CSS 如何将两个 div 保持在同一行上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10540446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I keep two divs on the same line?
提问by Riet
I've been working on a dropdown menu similar to suckerfish. I've got the dropdown side working now, but I have some images I'm trying to put on either side of the links. Right now I'm using a div the size of the image, then setting the background-imageproperty to the image I need (so that it can change using the pseudo :hover class).
我一直在研究类似于吸盘鱼的下拉菜单。我的下拉菜单现在可以工作了，但是我有一些图片我想放在链接的任一侧。现在我正在使用图像大小的 div，然后将background-image属性设置为我需要的图像（以便它可以使用伪 :hover 类进行更改）。
Here is the CSS That applies:
这是适用的 CSS：
ul#menu3 li {
color: #000000;
float: left;
/*I've done a little playing around here, doesn't seem to do anything*/
position: relative;
/*margin-bottom:-1px;*/
line-height: 31px;
width: 10em;
padding: none;
font-weight: bold;
display: block;
vertical-align: middle;
background-image: url(../../images/dropdown/button-tile.gif);
}
.imgDivRt {
width: 20px;
height: 31px;
display: inline;
float: right;
vertical-align: middle;
background-image: url(../../images/dropdown/button-right.gif);
}
.imgDivLt {
width: 20px;
height: 31px;
display: inline;
float: left;
vertical-align: middle;
background-image: url(../../images/dropdown/button-left.gif);
}
I was using selectors to save a little on having different classes, but internet explorer doesn't seem to support them :(
我使用选择器来节省一些不同的类，但 Internet Explorer 似乎不支持它们:(
Here is my HTML that applies:
这是我适用的 HTML：
<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div>
<ul>
<li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a>
<ul>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
</ul>
</li>
<li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a>
<ul>
<li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li>
<li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
</ul>
</li>
<li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
<li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
</ul>
</li>
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div>
I'm not sure if there's a glitch in my code, or if I'm on the wrong track. It works in firefox, safari, and chrome, but not IE or opera, so I'm not sure if they're making up for stupidity or what. Ideally, the second image floats greedily to the right in the containing block. In the problem browsers, it sits the next line down (at the far right at least)
我不确定我的代码是否有问题，或者我是否在错误的轨道上。它适用于 firefox、safari 和 chrome，但不适用于 IE 或歌剧，所以我不确定它们是在弥补愚蠢还是什么。理想情况下，第二个图像在包含块中贪婪地向右浮动。在有问题的浏览器中，它位于下一行（至少在最右边）
回答by J D
You can make two divs inline this way:
您可以通过这种方式内联两个 div：
display:inline;
float:left;
回答by Maxim Lott
For me, this worked much better, as it didn't eliminate spacing between floated items:
对我来说，这效果更好，因为它没有消除浮动项目之间的间距：
display:inline-block;
In case that helps anyone else.
如果这有助于其他人。
回答by Ronnie Royston
Simple do display: inline-blockon both div's but be sure and set min-widthand max-widthboth. Example below:
display: inline-block在两者上都做简单的事情，div但一定要确定并设置min-width和max-width两者兼而有之。下面的例子：
div {
max-width: 200px;
min-width:200px;
background:grey;
display:inline-block;
vertical-align: top;
}<div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
</div>回答by iLoveMechKeyboards
This method also works great for adjusting two divs to the same line for website builders like shopify, weebly, where you can't adjust the CSS files very easily. Just wanted to drop this particular answer in for other people searching for website builder solutions too.
这种方法也适用于将两个 div 调整为同一行的网站建设者，如 shopify、weebly，在这些网站上您不能很容易地调整 CSS 文件。只是想为其他搜索网站构建器解决方案的人提供这个特定的答案。
display:inline;
float:left;
All credit goes to J D who originally discovered the solution above.
所有的功劳都归功于最初发现上述解决方案的 JD。
