36

我一直在研究类似于 Suckerfish 的下拉菜单。我现在已经让下拉菜单工作了，但是我有一些图像我正试图放在链接的任一侧。现在我正在使用图像大小的 div，然后将background-image属性设置为我需要的图像（以便它可以使用伪 :hover 类进行更改）。

这是适用的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 或 Opera，所以我不确定它们是在弥补愚蠢还是什么。理想情况下，第二个图像在包含块中贪婪地向右浮动。在有问题的浏览器中，它位于下一行（至少在最右边）

4

6 回答 6

63

您可以通过这种方式使两个 div 内联：

display:inline;
float:left;
于 2012-05-10T18:55:52.823 回答
12

对我来说，这工作得更好，因为它没有消除浮动项目之间的间距：

display:inline-block;

以防万一对其他人有所帮助。

于 2017-11-30T18:45:14.630 回答
6

display: inline-block对两者都很简单，但一定要确定并div设置两者。下面的例子：min-widthmax-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>

于 2018-06-22T18:11:17.893 回答
1

将此添加到容器 div

.container_class {
    display: flex;
    justify-content: center;
}
于 2021-05-31T09:23:33.120 回答
1

如果你想在一个单一的延续中创建多个 div，那么只需将下面的代码行添加到你的 css 文件中，每个 div、div 类等。

display: inline-block;
于 2020-07-13T20:53:52.747 回答
0

此方法也适用于将两个 div 调整到同一行，以便为诸如 shopify、weebly 等网站构建器，您无法很容易地调整 CSS 文件。只是想为其他搜索网站构建器解决方案的人提供这个特定的答案。

display:inline;
float:left;

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

于 2020-05-08T21:52:29.250 回答