HTML5 / CSS3: How to fix an unordered list item at the end of all items

Question

HTML5 / CSS3: How to fix an unordered list item at the end of all items

Navigation

#1 by (2 votes)

2

/*   Nav retratil  */
/*=================*/
#something,
nav ul li, inputr,
nav ul input:checked ~li label.abrir {
    display:none;
}

nav ul input:checked ~li,
nav ul li.fixo, li.abrir {
    display: block;
}

nav ul li label {
    color: red;
    font-weight: 900;
    margin-left: 110px;
    cursor: pointer;
}
nav ul li label.abrir {
    align:right;
    cursor: copy;
}

<html>
<body>
<nav>
<ul>
<input type="checkbox" id="something">
<li class="fixo">
   <a class="textoimpressao" href="#textoimpressao"> Texto para impressão </a>
</li>
<li class="fixo">#1</li>
<li class="fixo">#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
<li>#6</li>
<li>#7</li>
<li>#8</li>
<li class="fixo">
   <label for="something" class="abrir"> Ver mais &#8609; </label>
</li>
<li> 
   <label for="something"> Ocultar &#8607; </label>
</li>
<li>#9</li>
<li>#10</li>
<li>#11</li>
<li>#12</li>
</ul>
</nav>
</body>
</html>

In the

Hide

section, how do I leave only HTML rendering at the end rendering HTML5 / CSS3 only?

html5 css3

asked by anonymous 23.10.2018 / 20:16

1 answer

How to assign array of characters in a structure? Use two titles (labels) in an input group bootstrap

score 2 · Accepted Answer

If I understand correctly, there is a way to change the order only with CSS, first you have to set UL to display:flex and direction in column , after that you define a class for this item that should always be last, and puts the CSS attribute oreder:2; on it.

Flex items have a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given order value.

"The% wrapper items have a default% wrapper value of 0, so items with an integer value greater than 0 will be displayed after any item that has not received a% wrapper% explicit. "

Every item within a container flex is by definition flex , so by placing "%" in% it will always be the item with the highest value , and will always be the last one on the list.

Here is more detailed Mozilla documentation on how order of order works

See the result:

/* Nav retratil */
/*=================*/
#something,
nav ul li,
input,
nav ul input:checked ~ li label.abrir {
    display:none;
}

nav ul input:checked ~ li,
nav ul li.fixo,
li.abrir {
    display: block;
}

nav ul li label {
    color: red;
    font-weight: 900;
    margin-left: 110px;
    cursor: pointer;
}
nav ul li label.abrir {
    text-align:right;
    cursor: copy;
}

ul {
    display: flex;
    flex-direction: column;
}
.last {
    order: 2;
}

<nav>
    <ul>
        <input type="checkbox" id="something">
        <li class="fixo">
            <a class="textoimpressao" href="#textoimpressao"> Texto para impressão </a>
        </li>
        <li class="fixo">#1</li>
        <li class="fixo">#2</li>
        <li>#3</li>
        <li>#4</li>
        <li>#5</li>
        <li>#6</li>
        <li>#7</li>
        <li>#8</li>
        <li class="fixo">
            <label for="something" class="abrir"> Ver mais &#8609; </label>
        </li>
        <li class="last">
            <label for="something"> Ocultar &#8607; </label>
        </li>
        <li>#9</li>
        <li>#10</li>
        <li>#11</li>
        <li>#12</li>
    </ul>
</nav>