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

Asked 6 years, 1 month ago

Viewed 52 times

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 stretch

Conceal

as left fixed at the end only in HTML rendering, using only HTML5/CSS3?

I didn’t get it right, you want "Hide" to always be the last item is this? It wasn’t very clear...

– hugocsl

2018/10/23 at 18:23
@hugocsl, no. I want this item whose text is "hide" to always be at the bottom of the list. Always be the last element.

– britodfbr

2018/10/23 at 18:36

1 answer

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-23T18:40:32+00:00

If I understand correctly there is a way to change the order yes only with CSS, first you have to define the UL as display:flex and direction in column, after that you define a class for that item that should always be last, and put the CSS attribute oreder:2; in 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 an Explicit order value.

PORTUGUÊS "The items flex have a value of order standard 0, therefore items with an integer value greater than 0 will be displayed after any item that has not received a value of order explicit."

Every item within one flex container is by definition order:0, then when placing "manually" oreder:2 in it it will always be the item with higher index value, and will always be the last on the list.

Here is a more detailed documentation of how Mozilla works order of flex-items https://developer.mozilla.org/pt-PT/docs/Web/CSS/CSS_Flexible_Box_Layout/ordenacao_dos_itens_flex

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>