Вопрос по internet-explorer, css-float, css – Как мне сохранить два деления на одной строке?
Я работал над выпадающим меню, похожим на suckerfish. У меня теперь работает раскрывающаяся сторона, но у меня есть несколько изображений, которые я пытаюсь разместить по обе стороны от ссылок. Сейчас я использую div размер изображения, затем устанавливаюbackground-image Свойство к изображению, которое мне нужно (чтобы его можно было изменить с помощью класса pseudo: hover).
Вот CSS, который применяется:
<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>
Я использовал селекторы, чтобы немного сэкономить на использовании разных классов, но Internet Explorer, похоже, их не поддерживает :(
Вот мой HTML, который применяется:
<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>
Я не уверен, есть ли сбой в моем коде, или я нахожусь не на том пути. Он работает в Firefox, Safari и Chrome, но не в IE или Opera, поэтому я не уверен, что они компенсируют глупость или что-то в этом роде. В идеале, второе изображение жадно перемещается вправо в содержащем блоке. В проблемных браузерах она располагается на следующей строке (по крайней мере в крайнем правом углу)
span а такжеclear:bothделаетclear нужно использовать на элементе определенного типа?
<li><a href="#"><span class="imgDivLt"></span><span class="imgDivRt"></span>Sub 1</a></li> по какой-то причине размещение текста между изображениями привело в замешательство IE и Opera.
span что естественноinline, а неdiv что естественноblock.
Просто сделать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>Похожие вопросы
