как мне сохранить два деления на одной строке?

<p>я работал над выпадающим меню, похожим на suckerfish. теперь у меня работает раскрывающаяся сторона, но у меня есть несколько изображений, которые я пытаюсь разместить по обе стороны от ссылок. прямо сейчас я использую div размер изображения, а затем устанавливаю свойство <code>background-image</code> для нужного мне изображения (чтобы оно могло изменяться с помощью класса pseudo: hover).</p><p>вот css, который применяется:</p><pre><code>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); } </code></pre><p>я использовал селекторы, чтобы немного сэкономить на использовании разных классов, но internet explorer, похоже, не поддерживает их :( </p><p>вот мой html, который применяется:</p><pre><code><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> </code></pre><p>я не уверен, есть ли сбой в моем коде, или я ошибаюсь. он работает в firefox, safari и chrome, но не в ie или в опере, поэтому я не уверен, что они компенсируют глупость или что-то в этом роде. в идеале, второе изображение жадно перемещается вправо в содержащем блоке. в проблемных браузерах она располагается на следующей строке (по крайней мере в крайнем правом углу)</p>

<p>таким образом, вы можете сделать два встроенных div:</p><pre><code>display:inline; float:left; </code></pre>

<p>для меня это работало намного лучше, так как не устраняло промежутки между плавающими элементами:</p><pre><code>display:inline-block; </code></pre><p>в случае, если это помогает кому-то еще.</p>

<p>просто сделайте <code>display: inline-block</code> для обоих <code>div</code>, но будьте уверены, и установите <code>min-width</code> и <code>max-width</code> оба. пример ниже:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { max-width: 200px; min-width:200px; background:grey; display:inline-block; vertical-align: top; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>