it-swarm.com.ru

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

Я работал над выпадающим меню, похожим на suckerfish. Теперь у меня работает раскрывающаяся сторона, но у меня есть несколько изображений, которые я пытаюсь разместить по обе стороны от ссылок. Прямо сейчас я использую div размер изображения, а затем устанавливаю свойство background-image для нужного мне изображения (чтобы оно могло изменяться с помощью класса pseudo: 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 или в опере, поэтому я не уверен, что они компенсируют глупость или что-то в этом роде. В идеале, второе изображение жадно перемещается вправо в содержащем блоке. В проблемных браузерах она располагается на следующей строке (по крайней мере в крайнем правом углу)

21
Riet

Таким образом, вы можете сделать два встроенных div:

display:inline;
float:left;
43
J D

Для меня это работало намного лучше, так как не устраняло промежутки между плавающими элементами:

display:inline-block;

В случае, если это помогает кому-то еще.

5
Maxim Lott

Просто сделайте 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>

1
Ron Royston