Разделять список на две колонны, не затрагивая других списков внутри нее

Привет у меня есть проблемы, чтобы разделять список на две колонны, не затрагивая других, которые внутри них, список - что-либо подобное:

  • Tipos de Datos
    • Enteros, Ordinales
    • Puntos Flotantes
    • Cadenas, Char
    • Punteros
    • Otros
  • Cadenas y Char
    • Operaciones
    • Convertir desde
    • Convertir hacia
    • Presentación
  • Estructura del Programa
    • Control del Programa
    • Datos del Programa
    • Ciclos
    • Lógica
    • Orientado a Objetos
  • .....

и моя таблица стилей - следующая:

#rtl_func li {
  list-style:none;
  overflow: hidden;
}

#rtl_func ul[id|=f_] li { display:inline}

#rtl_func ul[id|=f_] li:nth-child(4):before {display: block; content: '';}

#rtl_func li.list_root {
  padding-bottom: 20px; 
}

но мне не удается разделить список на две колонны без того, чтобы он затрагивал списки внутри нее.

Здесь пример в JsFiddle

Привет

Обновление:

я обновил jsFiddle с рекомендациями @learnercys и еще останься, не разделяясь на две колонны.

2
задан 30.03.2016, 03:33
3 ответа

Если то, что ты хочешь, состоит в том, чтобы список разделился на две колонны, ты хорошо направлен методом, о котором ты упоминаешь в комментариях (используя columns):

ul#rtl_func{ 
  columns: 2; 
  -webkit-columns: 2; 
  -moz-columns: 2; 
} 

Но это способствует тому, чтобы изначально какой-то из внутренних списков сломался немного редким способом (в половину списка). Чтобы это предотвращать ты можешь использовать свойство break-inside со стоимостью avoid что избегает того, чтобы элемент сломал между две колонны. Только ты был бы должен применять к нему это в li приходящие ученицы:

ul#rtl_func > li { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid; 
}

Результат остался бы таким (с кодом JSFiddle):

var librerias = {
  "data": [
    {
      "main": "Types",        
      "text":"Tipos de Datos",
      "child":[
        {"display": "Enteros, Ordinales", "value": "Ints"},
        {"display": "Puntos Flotantes", "value": "Floats"},
        {"display": "Cadenas, Char", "value": "Strings"},
        {"display": "Punteros", "value": "Pointers"},
        {"display": "Otros", "value": "Otros"}
      ]

    },
    {
      "main": "Strings",        
      "text": "Cadenas y Char",
      "child":[
        {"display": "Operaciones", "value": "Calcs" },
        {"display": "Convertir desde", "value": "ConvsFrom" },
        {"display": "Convertir hacia", "value": "ConvsTo" },
        {"display": "Presentación", "value": "Display" }
      ]

    },
    {
      "main": "PgmStruct",        
      "text": "Estructura del Programa",
      "child":[
        {"display": "Control del Programa", "value": "Control" },
        {"display": "Datos del Programa", "value": "Data" },
        {"display": "Ciclos", "value": "Loops" },
        {"display": "Lógica", "value": "Logic" },
        {"display": "Orientado a Objetos", "value": "Object" }
      ]

    },
    {
      "main": "Numbers",        
      "text": "Números y Conjuntos",
      "child":[
        {"display": "Cálculos", "value": "Calcs" },
        {"display": "Convertir Desde", "value": "ConvsFrom" },
        {"display": "Convertir Hacia", "value": "ConvsTo" },
        {"display": "Trigonometría", "value": "Trig" },
        {"display": "Números por defecto", "value": "Values" },
        {"display": "Presentación", "value": "Display" }
      ]

    },
    {
      "main": "Options",        
      "text": "Opciones",
      "child":[
        {"display": "Opciones de Control", "value": "Control" },
        {"display": "Opciones de Datos", "value": "Data" }
      ]

    },		
    {
      "main": "DatesAndTimes",        
      "text": "Fechas y Tiempos",
      "child":[
        {"display": "Cálculos", "value": "Calcs" },
        {"display": "Convertir Desde", "value": "ConvsFrom" },
        {"display": "Convertir Hacia", "value": "ConvsTo" },
        {"display": "Valores", "value": "Values" },
        {"display": "Presentación", "value": "Display" }
      ]
    },
    {
      "main": "Files",        
      "text": "Archivos",
      "child":[
        {"display": "Operaciones", "value": "Control" },
        {"display": "Acceso de Datos", "value": "Data" },
        {"display": "Manejo", "value": "Strings" }
      ]

    },	
  ]      
};

$(librerias.data).each(function(index){
  $('#rtl_func').append('<li id="f_' + index + '" class="list_root">' + this.text + '<ul id="c_'+index+'"></ul>');
  $(this.child).each(function(i){
    $('#c_' + index).append('<li class="list_child">' + this.display + '</li>');
  });
  $('#rtl_func').append('</li>');
});
#rtl_func li {
  list-style:none;
  overflow: hidden;
}

#rtl_func ul[id|=f_] li { display:inline}

#rtl_func ul[id|=f_] li:nth-child(4):before {display: block; content: '';}

#rtl_func li.list_root {
  padding-bottom: 20px; 
}

/* Mostrar la lista en dos columnas */
ul#rtl_func { 
  columns: 2; 
  -webkit-columns: 2; 
  -moz-columns: 2; 
}

/* no romper los elementos externos */
ul#rtl_func > li { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="rtl_func">
</ul>

Как индийский Equiso в Вашем комментарии, опоре в break-inside он не является очень распространенным (хотя он не так такой дьявол как это прохвост MDN, как возможно видеть в caniuse.com). Так что здесь я оставляю альтернативу используя display и width что да вынесены всеми браузерами:

var librerias = {
  "data": [
    {
      "main": "Types",        
      "text":"Tipos de Datos",
      "child":[
        {"display": "Enteros, Ordinales", "value": "Ints"},
        {"display": "Puntos Flotantes", "value": "Floats"},
        {"display": "Cadenas, Char", "value": "Strings"},
        {"display": "Punteros", "value": "Pointers"},
        {"display": "Otros", "value": "Otros"}
      ]

    },
    {
      "main": "Strings",        
      "text": "Cadenas y Char",
      "child":[
        {"display": "Operaciones", "value": "Calcs" },
        {"display": "Convertir desde", "value": "ConvsFrom" },
        {"display": "Convertir hacia", "value": "ConvsTo" },
        {"display": "Presentación", "value": "Display" }
      ]

    },
    {
      "main": "PgmStruct",        
      "text": "Estructura del Programa",
      "child":[
        {"display": "Control del Programa", "value": "Control" },
        {"display": "Datos del Programa", "value": "Data" },
        {"display": "Ciclos", "value": "Loops" },
        {"display": "Lógica", "value": "Logic" },
        {"display": "Orientado a Objetos", "value": "Object" }
      ]

    },
    {
      "main": "Numbers",        
      "text": "Números y Conjuntos",
      "child":[
        {"display": "Cálculos", "value": "Calcs" },
        {"display": "Convertir Desde", "value": "ConvsFrom" },
        {"display": "Convertir Hacia", "value": "ConvsTo" },
        {"display": "Trigonometría", "value": "Trig" },
        {"display": "Números por defecto", "value": "Values" },
        {"display": "Presentación", "value": "Display" }
      ]

    },
    {
      "main": "Options",        
      "text": "Opciones",
      "child":[
        {"display": "Opciones de Control", "value": "Control" },
        {"display": "Opciones de Datos", "value": "Data" }
      ]

    },		
    {
      "main": "DatesAndTimes",        
      "text": "Fechas y Tiempos",
      "child":[
        {"display": "Cálculos", "value": "Calcs" },
        {"display": "Convertir Desde", "value": "ConvsFrom" },
        {"display": "Convertir Hacia", "value": "ConvsTo" },
        {"display": "Valores", "value": "Values" },
        {"display": "Presentación", "value": "Display" }
      ]
    },
    {
      "main": "Files",        
      "text": "Archivos",
      "child":[
        {"display": "Operaciones", "value": "Control" },
        {"display": "Acceso de Datos", "value": "Data" },
        {"display": "Manejo", "value": "Strings" }
      ]

    },	
  ]      
};

$(librerias.data).each(function(index){
  $('#rtl_func').append('<li id="f_' + index + '" class="list_root">' + this.text + '<ul id="c_'+index+'"></ul>');
  $(this.child).each(function(i){
    $('#c_' + index).append('<li class="list_child">' + this.display + '</li>');
  });
  $('#rtl_func').append('</li>');
});
#rtl_func li {
  list-style:none;
  overflow: hidden;
}

#rtl_func ul[id|=f_] li { display:inline}

#rtl_func ul[id|=f_] li:nth-child(4):before {display: block; content: '';}

#rtl_func li.list_root {
  padding-bottom: 20px; 
}

/* Mostrar la lista en dos columnas */
ul#rtl_func { 
  columns: 2; 
  -webkit-columns: 2; 
  -moz-columns: 2; 
}

/* no romper los elementos externos */
ul#rtl_func > li { 
  display:inline-block;
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="rtl_func">
</ul>
0
ответ дан 24.11.2019, 14:41
  • 1
    Проблема со свойством break-inside состоит в том, что он не вынесен (или он неполный) в самой большей и # 237; в браузеров developer.mozilla.org/en-US/docs/Web/CSS/… – Diego Torres 30.03.2016, 04:25
  • 2
    @Equiso в и # 241; ad и # 237; альтернатива, которая не использует break-inside и которая функционирует сходным способом – Alvaro Montoro♦ 30.03.2016, 04:32
  • 3
    @AlvaroMontoro - точно то, в чем я нуждаюсь! спасибо!!, тестировать это и # 233;. – Enecumene 30.03.2016, 20:05

Если тебе не важно поддерживать порядок списка, ты можешь использовать flexbox.

ul#rtl_func {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
ul#rtl_func > li {
    display: block;
    min-width: 45%; /* para un pequeño gap entre columnas */
}

DEMO

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body {
  background: #fff;
}
ul#rtl_func {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  overflow: auto;
  padding: 0 10px;
  list-style: none;
}
ul#rtl_func > li {
  border-radius: 4px;
  border: 1px solid #dedede;
  font-weight: bold;
  font-family: 'segoe ui', sans-serif;
  margin: 10px 0;
  min-width: 45%;
  padding: 5px 10px;
  transition: box-shadow .25s ease;
}
ul#rtl_func > li:hover {
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,.15);
  cursor: default;
}
ul#rtl_func > li > ul > li {
  list-style: none;
  font-weight: normal;
}
ul#rtl_func > li > ul > li:first-of-type {
  border-top: 1px solid #eee;
  margin-top: 4px;
}
<ul id="rtl_func">
<li class="list_root" id="f_0">Tipos de Datos
    <ul id="c_0">
        <li class="list_child">Enteros, Ordinales</li>
        <li class="list_child">Puntos Flotantes</li>
        <li class="list_child">Cadenas, Char</li>
        <li class="list_child">Punteros</li>
        <li class="list_child">Otros</li>
    </ul>
</li>
<li class="list_root" id="f_1">Cadenas y Char
    <ul id="c_1">
        <li class="list_child">Operaciones</li>
        <li class="list_child">Convertir desde</li>
        <li class="list_child">Convertir hacia</li>
        <li class="list_child">Presentación</li>
    </ul>
</li>
<li class="list_root" id="f_0">Tipos de Datos
    <ul id="c_0">
        <li class="list_child">Enteros, Ordinales</li>
        <li class="list_child">Puntos Flotantes</li>
        <li class="list_child">Cadenas, Char</li>
        <li class="list_child">Punteros</li>
        <li class="list_child">Otros</li>
    </ul>
</li>
<li class="list_root" id="f_1">Cadenas y Char
    <ul id="c_1">
        <li class="list_child">Operaciones</li>
        <li class="list_child">Convertir desde</li>
        <li class="list_child">Convertir hacia</li>
        <li class="list_child">Presentación</li>
    </ul>
</li>
<li class="list_root" id="f_2">Estructura del Programa
    <ul id="c_2">
        <li class="list_child">Control del Programa</li>
        <li class="list_child">Datos del Programa</li>
        <li class="list_child">Ciclos</li>
        <li class="list_child">Lógica</li>
        <li class="list_child">Orientado a Objetos</li>
    </ul>
</li>
</ul>
1
ответ дан 24.11.2019, 14:41
  • 1
    Вот точно то, что я хочу, просвет, без эффектов, которые ты предлагаешь, сыграю с нею, уже я предупреждаю его, спасибо @MitsuGM – Enecumene 30.03.2016, 19:40

Ты должен использовать селектор > чтобы показывать, что ты только нуждаешься в том, чтобы измениться прямые дети элемента, с прямыми детьми я хочу сказать все элементы внутри root, и что были ближе в этом.

Пример:

root-element > direct-child {}

<root-element>
  <direct-child>
    <not-direct-child></not-direct-child>
  </direct-child>
</root-element>

# debe afectar a los hijos directos
element > child {}

# debe afectar a todos sus hijos
element child {} 

Тогда, один из твоих стилей остался бы таким:

/* solo afectara al li que es hijo directo de #rtl_func */
#rtl_func > li {
  list-style:none;
  overflow: hidden;

Обновление комментариев, как @Enecumene проблема находится в display: inline. Правильный стиль был бы:

#rtl_func > li { display:inline }

Одинокое затронуло бы list в:

<ul id="rtl_func">
  <li></li>
  <li></li>
  <li></li>
</ul>
0
ответ дан 24.11.2019, 14:41
  • 1
    Спасибо @learnecys, prob и # 233; и остается список, не разделяясь во вторую колонну. – Enecumene 30.03.2016, 00:30
  • 2
    @Enecumene я только что обновил ответы, ты предупреждаешь мне любое сомнение:) – learnercys 30.03.2016, 03:14
  • 3
    Спасибо за твое уважаемое время, я обновил мой jsFiddle с твоими рекомендациями и в и # 250; n останься, не разделяясь на две колонны, проверь это и видеть и # 225; s результаты. – Enecumene 30.03.2016, 03:35
  • 4
    @Enecumene podr и # 237; схвати добавлять изображение, как он был бы должен появляться, я верю в то, что быть и # 237; во многой утилиты. Конечно, display: inline то, что он делает, состоит в том, чтобы превращать элемент в блок в онлайновый элемент, не обязательно это преобразовывает в колонны, чтобы получать этот результат, требуют управления нескольких стилей. Уже я это проверяю:) – learnercys 30.03.2016, 04:52

Теги

Похожие вопросы