Попытка поместить три деления в одну строку, один против другого, по центру, на IE6, IE7, IE8 и Firefox - PullRequest
Новая
       6

Попытка поместить три деления в одну строку, один против другого, по центру, на IE6, IE7, IE8 и Firefox

1 голос
/ 03 декабря 2010

У меня проблема с этим:

- пробел - div1_left div2_center div3_right --space -

Div 1 и 3 содержат изображение, а Div 2 содержит ul / liна основе раскрывающегося меню CSS.Div 1 и 3 прилипают к Div 2. Общая линия отцентрирована по горизонтали.

Я могу добиться этого на Firefox и IE8 без проблем.Но на IE7 и IE6 это не работает.Мне нужно, чтобы он был совместим со всеми браузерами IE> = 6 и Firefox.

Большое спасибо!

Ответы [ 3 ]

4 голосов
/ 04 декабря 2010

Попробуйте это:

  1. Измените ваши текущие элементы 'div' на элементы 'span'.По умолчанию они будут встроены и будут отображаться рядом.
  2. Оберните это содержимое в div с идентификатором nav.
  3. Установите стиль CSS элемента navвключить маржу: 0 авто;ширина: 960 пикселей;стили.Это приведет к центрированию всего этого на странице.
  4. Убедитесь, что вы используете сброс CSS, чтобы помочь нормализовать рендеринг в разных браузерах.* Боб

    ОБНОВЛЕНИЕ: Вот ссылка на пример:

    http://jsbin.com/onasi/3/edit

2 голосов
/ 03 декабря 2010

Ну, я бы сделал 1 контейнер div с левым и правым отступом и полями слева и справа: auto.

и внутри него 3 div с этим стилем: 

width:100px;/* or how much you want (the sum of all must be <= container width) */
float:left;
1 голос
/ 06 января 2012

Чтобы быть точным на основе ответа, данного rcravens, вот код: 

<div style="vertical-align: middle; text-align: center; height: 50px; position: relative;
background-image: none; top: 0px; left: 0px; right: 0px" class='ui-state-default'>
        <span style="text-align: left; vertical-align: middle; display: inline-block; width: 33%;height: 100%;">
                <img id="imgLeft" style="float: left; text-align: center; vertical-align: middle;"class='logo' src='' alt='' />
       </span>
       <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;">
                <input type="text" id="txtSearch" style="width: 50%" />
                 <img id="btnGlobalSearch" class="findImage" style="cursor: pointer; vertical-align: middle" src="<%= System.Web.HttpContext.Current.Request.ApplicationPath.TrimEnd('/') + "/"%>Images/icons/find.png" />
       </span>
       <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;height: 100%;">
               <img id="imgRight" style="float: right; text-align: center; vertical-align: middle;"  src='' class='logo' alt='' />
       </span>
</div>

это удовлетворяет тягу к IE7 .....

...