36

私は吸盤に似たドロップダウンメニューに取り組んできました。ドロップダウン側が機能するようになりましたが、リンクの両側に配置しようとしている画像がいくつかあります。現在、画像のサイズの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);
}

私はセレクターを使用してさまざまなクラスを持つことを少し節約していましたが、InternetExplorerはそれらをサポートしていないようです:(

適用される私の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では動作しないため、それらが愚かさを補っているのかどうかはわかりません。理想的には、2番目の画像は包含ブロックの右側に貪欲に浮かんでいます。問題のあるブラウザでは、次の行（少なくとも右端）に配置されます

4

6 に答える 6

63

この方法で2つの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-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>

于 2018-06-22T18:11:17.893 に答える
1

1回の継続で複数のdivを作成する場合は、以下のコード行をcssファイルに追加し、各div、divクラスなどを追加します。

display: inline-block;
于 2020-07-13T20:53:52.747 に答える
1

これをコンテナdivに追加します

.container_class {
    display: flex;
    justify-content: center;
}
于 2021-05-31T09:23:33.120 に答える
0

この方法は、CSSファイルを簡単に調整できないshopifyやweeblyなどのWebサイトビルダーの2つのdivを同じ行に調整する場合にも最適です。ウェブサイトビルダーソリューションを探している他の人々にもこの特定の答えをドロップしたかっただけです。

display:inline;
float:left;

すべてのクレジットは、上記の解決策を最初に発見したJDに帰属します。

于 2020-05-08T21:52:29.250 に答える