Question

我一直在处理类似于suckerfish的下拉菜单。我现在有下拉式工作，但是我有一些想要放在链接两侧的图像。现在我正在使用图像大小的div，然后将background-image属性设置为我需要的图像（这样它可以使用伪：悬停类进行更改）。

以下是适用的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);
}

我使用选择器来节省一些不同的类，但是Internet Explorer似乎不支持它们:(

以下是适用的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>

我不确定我的代码中是否存在故障，或者我是否在错误的轨道上。它适用于firefox，safari和chrome，但不适用于IE或歌剧，所以我不确定它们是否弥补了愚蠢或者是什么。理想情况下，第二个图像贪婪地浮动到包含块中的右侧。在问题浏览器中，它位于下一行（至少在最右边）

Answer 1

你可以用这种方式内联两个div：

display:inline;
float:left;

Answer 2

对我来说，这样做效果更好，因为它没有消除浮动物品之间的间距：

display:inline-block;

如果能帮助其他人。

Answer 3

在两个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>

Answer 4

如果您要在一个连续区域中创建多个div，则只需将以下代码行添加到css文件中，并包含每个div，div类等。

display: inline-block;

Answer 5

此方法对于将两个div调整为同一行也非常有用，适用于shopify，weebly等网站建设者，在这些地方您无法轻松调整CSS文件。只是想为其他正在寻找网站构建器解决方案的人提供这个答案。

display:inline;
float:left;

所有功劳归功于最初发现上述解决方案的J D。

Answer 6

将此添加到容器div

.container_class {
    display: flex;
    justify-content: center;
}

如何在同一行保留两个div？

6 个答案: