Тег UL не центрируется с полем: 0 авто; стиль CSS - PullRequest
Новая
       28

Тег UL не центрируется с полем: 0 авто; стиль CSS

4 голосов
/ 28 января 2011

Я пытаюсь создать пейджер, который будет сидеть в центре div. В основном код выглядит так: 

   <div class="cms-pager">
       <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
       </ul>
   </div>

Если я укажу CSS следующим образом: 

  .cms-pager {  } 
  .cms-pager ul { background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

тогда UL не будет центрироваться, так как имеет ширину / цвет фона по всему div. Я просто не буду работать.

Если я укажу CSS следующим образом: 

  .cms-pager {  } 
  .cms-pager ul { width: 200px; background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

тогда UL центрируется на странице. Проблема в том, что мне пришлось указать фиксированную ширину: 200px; и если у меня есть только 1 или 2 ссылки, он находится точно в центре. Так что это мне не подходит, мне нужно, чтобы UL действительно имел ширину фактических тегов LI и точно определенную по ширине.

Если я укажу CSS следующим образом: 

  .cms-pager { margin: 0 auto; } 
  .cms-pager ul { float: left; background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

тогда UL фон серый только при LI 1 - 3. Так что я знаю, что размер в порядке. Но поскольку мне пришлось использовать стиль float: left, он автоматически выравнивается по левому краю и игнорирует поле div: 0 auto style;

Если я укажу CSS следующим образом: 

  .cms-pager { margin: 0 auto; text-align: center } 
  .cms-pager ul {background-color: somecolor; margin: 0 auto; display: inline-block; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

эта версия работает для Firefox, Chrome, но не для IE6 / 7, так как она некорректно работает со встроенным блоком;

Есть ли решение этой проблемы? Является ли единственным решением использовать разные теги, такие как таблица tr td, или можно что-то сделать с этим?

1 Ответ

6 голосов
/ 28 января 2011

Это достаточно близко? Нет поплавков, нет встроенных блоков. Просто старые блоки и выравнивает. 

.cms-pager, .cms-pager ul {
    margin: 0 auto;
}

.cms-pager {
    text-align: center;
}

.cms-pager ul li {
    display: inline;
    width: 10px;
    background-color: gray;
    padding: 5px;
}

Вот предварительный просмотр.

...