Fix last element of the list unordered in footer

Question

Fix last element of the list unordered in footer

Asked 5 years, 2 months ago

Viewed 69 times

1

The HTML displays a menu with minimum height, is it possible to keep the last item aligned in the footer of the menu in a fixed mode? I put 5 items before "all" but it is possible that there is less to be generated by the bank, but the last could be fixed in the footer.

ul.lista {
  height: 200px;
}

ul.lista li,
ul.lista li a {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

ul.lista li a {
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

ul.lista li a:last-child {
  border-bottom: 0px;
}

<ul class="lista">
  <li><a href="">Link#01</a></li>
  <li><a href="">Link#02</a></li>
  <li><a href="">Link#03</a></li>
  <li><a href="">Link#04</a></li>
  <li><a href="">Link#05</a></li>
  <li><a href="">Todos</a></li>
</ul>

Example of how I view the menu:

Could elaborate a [mcve] demonstrating what you want to do?

– Woss

2019/04/15 at 11:57
@Andersoncarloswoss is exactly what I intend, a north for example, is to fix the last <LI> in height: 500px; regardless of the amount of other <LI> and stay there, I do not know how to do.

– ElvisP

2019/04/15 at 11:59
You want the last LI always stick to the base of the parent container?

– hugocsl

2019/04/15 at 12:23

2 answers

1

What you need to "fix" is the last <li> of the list, not the last <a>. That’s because the <a> is the son of <li> and is not exactly on the list. You should also apply the other properties to <li>, and not us <a>. For example, here:

ul.lista li,
ul.lista li a {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

You are resetting properties of <a> that do not exist.

It should just be:

ul.lista li{
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

In this passage also:

ul.lista li a {
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

If you want to make a vertical menu with using list, who should have these edge properties and internal spacing were the <li>, and not the <a>. Would look like this:

ul.lista li{
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}

And finally, to fix the last <li>, as reported in the other reply, you should also apply the properties in the last <li> :last-child, and not a:last-child, because otherwise it will apply to all <a> of the list, because all the <a> sane :last-child. Would look like this:

ul.lista li:last-child {
  border-bottom: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}

Example:

ul.lista {
  height: 200px;
  background: gray;
  position: relative;
}
ul.lista li{
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}
ul.lista li{
  padding: 2px 2px;
  border-bottom: 1px solid #AFAFAF;
}
ul.lista li:last-child {
  border-bottom: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<ul class="lista">
    <li><a href="">Link#01</a></li>
    <li><a href="">Link#02</a></li>
    <li><a href="">Link#03</a></li>
    <li><a href="">Link#04</a></li>
    <li><a href="">Link#05</a></li>
    <li><a href="">Todos</a></li>
</ul>

1

Caraca, why some styles in last-Child in other elements did not fix, now I understood and even set other details of html, and worked perfectly in the code at the disposal of the last element. Thank you

– ElvisP

2019/04/15 at 13:02

Browser other questions tagged html css

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

by Jonathan de Toni • **1,260** points · Answer 1 · 2019-04-15T12:01:12+00:00

You can use the value fixed of property position:

ul.lista li a:last-hcild{
     position: fixed;
     bottom: 0;
     right: 0;
     border-bottom: 0px;
}

This property causes the element to be fixed to the screen, so it is not part of the page flow.

If the element is part of the page flow, it is best to use the position: absolute.

The value absolute needs another element on the page that serves as a reference, where you put the value relative.

ul.lista {
     position: relative;
     height: 200px;
}

ul.lista li a:last-hcild{
     position: absolute;
     bottom: 0;
     right: 0;
     border-bottom: 0px;
 }

The ul.lista serve as a reference point for ul.lista li a:last-hcild. This way the element will be inside the menu structure, and you can define where it will be positioned.