Divide a list into two columns without affecting other lists within it

Question

Divide a list into two columns without affecting other lists within it

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Hi, I have problems dividing a list into two columns without affecting others that are inside them, the list is something like this:

<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_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>

and my style sheet is as follows:

#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; 
}

but I can not divide the list into two columns without affecting the lists within it.

Here is an example in JsFiddle

Greetings

Update:

I have updated the jsFiddle with the recommendations of @learnercys and it is still not divided into two columns.

css

asked by Enecumene 29.03.2016 в 17:30

source

3 answers

1

If you do not mind maintaining the order of the list, you can use 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>

answered by 30.03.2016 в 18:33

0

You have to use the > selector to indicate that you only need to change the direct children of an element, with direct children I mean all elements within a root and that are closest to this.

Example:

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 {}

Then, one of your styles would look like this:

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

Update Of the comments, according to @Enecumene the problem is in display: inline . The correct style would be:

#rtl_func > li { display:inline }

This would only affect the list in:

<ul id="rtl_func">
  <li></li>
  <li></li>
  <li></li>
</ul>

answered by 29.03.2016 в 18:20

I can not delete my ionic browsing history jQuery Autocomplete in CodeIgniter, unable to resolve

score 0 · Accepted Answer

If what you want is that the list is divided into two columns, you are well on track with the method you mention in the comments (using columns ):

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

But that initially causes some of the internal lists to break a bit weird (half list). To avoid that you can use the break-inside property with the avoid value that prevents an element from breaking between two columns. You just have to apply it to external li :

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

The result would look like this (with the JSFiddle code):

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>

Like indicates Equid in your comment , support for break-inside is not very widespread (although it is not as bad as MDN paints, as can be seen in caniuse.com ). So here I leave an alternative using display and width that yes are supported by all browsers:

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>