Нужна помощь в отображении дочерних списков без интервала между родительскими списками
Я распечатываю список предлагаемых нами специальностей колледжей, а затем в рамках каждой специальности у нас есть концентрации для каждой специальности.
Наша специальность по естественным наукам включает следующие направления: экология и лесоводство, хиропрактика, химия, биология.
Вот скриншот того, что он делает:
Мне не нужен интервал, который он отображает (мне не нужен интервал, который вы видите после AAS управления человеческими ресурсами и после психологии) на снимке экрана, любая помощь приветствуется.
Исходный код будет выглядеть так:
.col-middle .majors-list li {
list-style-type: none;
width: 50%;
float: left;
margin-bottom: 2px;
}
.col-middle ul.majors-list {
margin-left: 0;
}
.col-middle ul.concentrations-list {
overflow: auto;
}
.col-middle .concentrations-list li {
float: none;
}<ul class = "majors-list">
<li>Major
<ul class = "concentrations-list">
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
</ul>
</li>
<li>Major
<ul class = "concentrations-list">
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
</ul>
</li>
<li>Major
<ul class = "concentrations-list">
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
</ul>
</li>
<li>Major
<ul class = "concentrations-list">
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
<li>Concentration Item</li>
</ul>
</li>
</ul>Нам нужна более конкретная информация, если вам нужна помощь. Какой интервал тебе не нужен? Как это должно выглядеть? Трудно помочь без какой-либо информации.
Я думаю, это связано с пространством под первым основным в левой колонке. Но я не понимаю, как он вообще попал в колонки. Мне кажется, это столы!
Мне не нужен интервал, который вы видите после AAS по управлению человеческими ресурсами и после Психологии.
почему бы вам не разбить список на ul с помощью float: left; ширина: 50%
@ Костис, это портит веселье! Дело в том, чтобы иметь чистый HTML и при этом иметь хорошее представление. На самом деле иметь два списка не имеет смысла, потому что вы пересекаете границу между представлением и смыслом.
Этот список создается динамически.
Как он попал в две колонки? Кажется, это вызывает проблему, и в вашем коде нет упоминания о столбцах.
@Karl, верхние li имеют ширину 50% и перемещаются влево. Вот как они складываются в столбцы.
DocType: <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "w3.org/1999/xhtml" xml: lang = "en" lang = "en">
@Brad, можно ли использовать Javascript для разделения списка?
Ответы 5
Попробуйте float: right вместо float: left.
Это работает для Firefox 2. Не работает с (многими) другими браузерами.
Вы хотите присвоить классу списка концентраций свойство display: none; в CSS.
Затем вы можете отобразить один из подсписок, назначив ему событие onclick, которое изменяет класс на отображение списка-концентраций и добавление класса отображения списка-концентраций в CSS и присвоение ему свойства display: block;.
Список концентраций (подсписок) должен отображаться постоянно, чтобы студенты могли видеть, что предлагает колледж.
Понятно, я думал, вы хотите сделать это «меню», в котором пользователь нажимает на отдел, и он разворачивается в основной список
Вы можете сделать это с помощью CSS3 Columns, но я предполагаю, что вам нужно, чтобы это работало в браузере который.
Без JavaScript вы не сможете этого сделать. С mozilla или webkit вы можете использовать - [moz | webkit] -column-count: 2; но даже это не даст вам того же решения, которое данный CSS почти предоставляет вам, другими словами, порядок будет вертикальным, а не горизонтальным. Когда я играл со свойством column-count, внутренние списки тоже разделялись по столбцам, что, как я полагаю, тоже было бы недостаточно.
Решение javascript, которое, как я считаю, может быть довольно легко реализовано с помощью фреймворка, такого как jquery, вероятно, будет принимать каждый из элементов li и динамически позиционировать их с помощью комбинации атрибутов position: relative и position: absolute и немного математики.
Одна вещь, которую вы можете попробовать, - это сделать ваш ul.majors-list display: inline; (или встроенный блок) и float: left; Это май работает.
Выше должно было быть «попробуйте сделать ваш ul.majors-list li display: inline;». Но я не могу заставить его работать, просто поигрался с ним быстро. Не уверен, как вы сможете это сделать, не избавляясь от самой верхней ul и просто делая каждую из них своим собственным списком.
Вы имеете в виду разрыв строки между "&" и "Лесное хозяйство"?