Как вывести на экран несколько <li>при ширине 100%? - PullRequest
Новая
       28

Как вывести на экран несколько <li>при ширине 100%?

5 голосов
/ 12 марта 2010

У меня есть следующий HTML: 

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

применяется с CSS следующим образом: 

#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

Так что теперь я хотел бы иметь неопределенное количество элементов (<li>), все со 100% шириной (чтобы они могли настраиваться в соответствии с размером окна браузера), но все рядом, отображая горизонтальную полосу прокрутки в контейнер.

Я пытался поместить "display: inline" в css ul и "float: left" в css li, но безуспешно.

Есть предложения?

Кроме того, постарайтесь учесть, что я пытаюсь сделать это "кросс-браузерно-совместимым", насколько это возможно.

Заранее спасибо.

Ответы [ 7 ]

11 голосов
/ 13 марта 2010

Как и другие, я изо всех сил пытаюсь понять, что именно вы ищете, но делает ли это то, что вы хотите? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Horizontal 100% LIs</title>
    <style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; }  /* IE6 hack */
* html #container { padding-bottom:17px;}  /* IE6 hack  */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; }  /* IE7 hack  */
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
      </ul>
    </div>
</body>
</html>

Вывод LI на одну строку состоит из двух частей. Пустое пространство: nowrap на ul останавливает автоматическое перенос, а display: inline-block на LI позволяет им работать один за другим, но на них установлены ширины, отступы и поля. Для браузеров, соответствующих стандартам, этого достаточно.

Однако IE6 и IE7 нуждаются в особой обработке. Они не поддерживают display: inline-block должным образом, но, к счастью, display: inline для элементов с установленным hasLayout дает поведение, очень похожее на display: inline-block. Ширина: 100% уже заставила установить hasLayout на LI, поэтому все, что нам нужно сделать, это направить отображение: встроенное только в IE6 и IE7. Есть несколько способов сделать это (условные комментарии популярны в StackOverflow), но здесь я выбрал хаки * html и *: first-child + html для выполнения этой работы.

Кроме того, в IE6 и IE7 есть еще одна ошибка, когда полоса прокрутки накладывается на содержимое, поэтому контейнеру дается нижнее заполнение, чтобы освободить место для полосы прокрутки. Полоса прокрутки является платформой управления, поэтому ее высота не может быть точно известна, но 17 пикселей, по-видимому, работают в большинстве случаев.

Наконец, IE7 также хочет установить вертикальную полосу прокрутки, поэтому переполнение y: hidden, направленное на IE7, предотвращает это.

(Заполнение: 0, поле: 0, стиль списка: нет, и стили отдельных LI только для того, чтобы более четко показать, что происходит.)

4 голосов
/ 04 апреля 2013

Вы хотите, чтобы он действовал как старый добрый стол: 

<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

тогда вы также можете красиво свернуть его, когда страница маленькая: 

/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}
1 голос
/ 07 апреля 2012

используя jquery для размещения ваших li после того, как на вашей странице есть 

  var ul = $('#yourListId');
  var numChildren = ul.children().length;
  if(numChildren <= 0){
    return;
  }
  ul.css({'list-style':'none','margin':0,'padding':0});
  var parentWidth = ul.width();
  var childWidth = parentWidth/numChildren;
  ul.children().each(function(index, value){
    $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
  });
  ul.after('<div style="clear:both">');

За исключением CSS "childWidth" ... вы, конечно, можете заменить другой CSS чем-то из таблицы стилей.

1 голос
/ 12 марта 2010

То, что вы пытаетесь сделать, похоже на то, что делают ячейки таблицы, и невозможно, в противном случае, без использования JavaScript (однако я не предлагаю использовать таблицы или JavaScript для этого). Лучше всего установить определенное количество горизонтальных отступов для тегов <li> и разместить их так, чтобы они автоматически ширились на основе ширины их содержимого вместо ширины окна: 

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

<style type="text/css">
#container, #container ul {
    width: 100%;
    float: left;
}

#container ul li {
    margin: 0 10px 0 0;
    padding: 5px 10px;
    float: left;
}
</style>

Другой метод - использовать display: inline-block; для достижения того, что вы хотите, но это своего рода хак (не совместимый с браузерами).

0 голосов
/ 12 марта 2010

Я думаю, что то, что вы хотите сделать, невозможно в кросс-браузерных css и html; если вы устанавливаете ширину li равной 100%, вы устанавливаете ширину родительского элемента, и вам действительно нужно, чтобы родительский элемент (ul) имел ширину всех li, объединенных. И вы не можете установить ширину, в x раз превышающую ширину экрана, используя только CSS.

И даже если бы вы могли, это также увеличило бы li, как сказано, чтобы быть 100% его родительского элемента. Вроде проблема курицы и яйца для браузера.

Хотя в javascript это просто, просто вычислите количество li, установите их ширину в соответствии с шириной экрана и установите ul width в (количество li) x (ширина экрана).

0 голосов
/ 12 марта 2010

Как правило, чтобы показать li в горизонтальном направлении, вы можете оставить их влево. Часть, которая меня смущает, это 100% ширина. Как каждый li может иметь ширину 100%, если он может быть таким же широким, как и его контейнер? Похоже, что li нужно фиксированной ширины или автоматического размера без ширины. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        #container { width:100%; overflow:auto; }
        #container ul { width: 100%; }
        #container li { float:left; }
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li>element 1</li>
        <li>element 2</li>
      </ul>
    </div>
</body>
</html>
0 голосов
/ 12 марта 2010

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

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }
...