Как отобразить встроенные несколько <литий> с 100% шириной?
У меня есть следующий 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 ул. и "float:left" на CSS лития, но без успеха.
Какие-либо предложения?
Кроме того, попытайтесь полагать, что я пытаюсь сделать это как "перекрестный браузер совместимый" как возможное.
Заранее спасибо.
5 ответов
Как и другие, я изо всех сил пытаюсь понять, что именно вы ищете, но делает ли это то, что вы хотите?
<!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 одна строка состоит из двух частей. White-space: nowrap в ul останавливает любое автоматическое обертывание, а display: inline-block на LI позволяет им запускаться один за другим, но для них установлены значения ширины, отступов и полей. Для браузеров, соответствующих стандартам, этого достаточно.
Однако IE6 и IE7 требуют особого обращения. Они не поддерживают display: inline-block должным образом, но, к счастью, display: inline для элементов с установленным hasLayout дает поведение, очень похожее на display: inline-block. Параметр width: 100% уже заставил hasLayout быть установленным для LI, поэтому все, что нам нужно сделать, это направить display: inline только на IE6 и IE7.Есть несколько способов сделать это (условные комментарии популярны в StackOverflow), но здесь я выбрал для этой работы хаки * html и *: first-child + html.
Кроме того, в IE6 и IE7 есть еще одна ошибка, из-за которой полоса прокрутки перекрывает содержимое, поэтому контейнеру предоставляется padding-bottom, чтобы освободить место для полосы прокрутки. Полоса прокрутки - это элемент управления платформы, поэтому ее высоту нельзя точно определить, но 17 пикселей, похоже, подходят для большинства случаев.
Наконец, IE7 также хочет добавить вертикальную полосу прокрутки, поэтому overflow-y: hidden, направленный на IE7, предотвращает это.
(Padding: 0, margin: 0, list-style: none и стили отдельных LI служат только для того, чтобы более четко показать, что происходит.)
То, что вы пытаетесь сделать, похоже на то, что делают ячейки таблицы, и невозможно иначе, без использования JavaScript ( Однако я не предлагаю использовать для этого таблицы или JavaScript). Лучше всего установить определенное количество горизонтальных отступов в тегах и разместить их так, чтобы их ширина автоматически зависела от ширины их содержимого, а не ширины окна:
<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; для достижения того, чего вы хотите, но это своего рода взлом (не совместим с кроссбраузерностью).
Попробуйте это
<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; }
Как правило, чтобы показать 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>
Я думаю, что то, что вы хотите сделать, невозможно в кроссбраузерном css и html; если вы устанавливаете ширину li на 100%, вы устанавливаете ее на ширину его родительского элемента, а на самом деле вам нужно, чтобы родительский элемент (ul) имел ширину всех li вместе взятых. И вы не можете установить ширину в x раз больше ширины экрана, используя только css.
И даже если бы вы могли, это также увеличило бы li's, так как они должны быть 100% от своего родительского элемента. Это своего рода проблема курицы и яйца для браузера.
В javascript все просто, просто подсчитайте количество li's, установите их ширину равной ширине экрана и установите ширину ul равной (количество li's) x (ширина экрана).