VPF::Резиновый LI - Форум программистов

Shogun

Дата 6.6.2012, 03:00 (ссылка)

(нет голосов)

Загрузка ...

сёгун-сан

Профиль
Группа: Участник
Сообщений: 290
Регистрация: 8.6.2006
Где: Кишинёв

Репутация: 1
Всего: 11

Добрый вечер,

И так есть такой горизонтальный список:

Код


<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Ul</title>
  <style type="text/css">
    body {
      background: #333333;
     background-size: cover;
     font-family: Arial, sans-serif;
     font-size: 12px;
     color: #ffffff;
    }
    
    ul {
      position: relative;
      margin: 30px;
      padding: 0px;
      min-width: 600px;
      list-style-type: none;
    }
    
    ul li {
      display: block;
      float: left;
      padding-top: 30px;
      height: 50px;
      text-align: center;
      outline: solid 1px #cccccc;
    }
    
    ul li.a { width: 30px; }
    ul li.b { margin-left: 10px; width: 30px; }
    
    ul li.c { margin-left: 10px; margin-right: 10px; }
    
    ul li.d { float: right; width: 100px; }
    
  </style>
</head>
<body>
  <ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
  </ul>
</body>
</html>

Ячейки A, B и D фиксированные, в C должна меняться в зависимости от ширины браузера.

Пробовал поставить display: inline-block и без float: left но тоже не хочет.
Опыта в верстке немного так что бьюсь головой об стену smile

Помогите пожалуйста решить эту проблему кто знает smile

UPD

пришло в голову решение с использованием table

Код


// теперь список в диве с margin: 30px
ul {
  display: table;
  width: 100%;
}

ul li {
  display: table-cell;
}

вроде работает в safari, chrome, firefox и opera на mac osx,
но на сколько это решение правильное и какие проблемы могут возникнуть?
может есть что-то по лучше?

Спасибо.

Это сообщение отредактировал(а) Shogun - 6.6.2012, 03:17

--------------------

2b || !2b

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »