CSS: Элементы меню внизу

Question

Я хочу создать меню, в котором пункты меню должны быть размещены внизу. Даже если у них есть 2 строки или больше.

ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 

 
    li { 
 
     float: left; 
 
     height: 90px; 
 
     width: 100px; 
 
    } 
 

 
    li a { 
 
     display: block; 
 
     color: yellow; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
     position: relative; 
 
     bottom: -40px; 
 
    } 
 

 
    li a:hover { 
 
     background-color: #111; 
 
    }

<ul> 
 
     <li><a href="default.asp">Home</a></li> 
 
     <li><a href="news.asp">Newsletter & Extras</a></li> 
 
     <li><a href="contact.asp">Contact</a></li> 
 
     <li><a href="about.asp">About</a></li> 
 
    </ul>

Сейчас я пытаюсь добиться этого сделать а-теги относительны и регулировки дна. но это не работает.

так как это возможно, что все тексты выровнены по воображаемой линии внизу?

Answer 1

Flexbox можно сделать:

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
    height: 90px; 
 
    width: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
} 
 
li a { 
 
    display: block; 
 
    color: yellow; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a href="default.asp">Home</a> 
 
    </li> 
 
    <li><a href="news.asp">Newsletter & Extras</a> 
 
    </li> 
 
    <li><a href="contact.asp">Contact</a> 
 
    </li> 
 
    <li><a href="about.asp">About</a> 
 
    </li> 
 
</ul>

Answer 2

нормально, нашел решение: литий должен быть относительным, а-теги внутри должны быть абсолютными:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
    height: 90px; 
    width: 100px; 
    position: relative; 
} 

li a { 
    display: block; 
    color: yellow; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    position: absolute; 
    bottom: 0px; 
} 

li a:hover { 
    background-color: #111; 
} 

Answer 3

Используйте этот код:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #333; 
    display: flex; 
    padding-top: 50px; 
    flex-wrap: wrap; 
} 
li a { 
    display: block; 
    color: yellow; 
    text-align: center; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: grey; 
} 

Answer 4

Этот класс используется Li:

li { 
     float: left; 
     height: 90px;    
    } 

Просто удалите ширину от этого класса.

Answer 5

Проверить это я изменил CSS несколько palces может быть я sloved ваши проблемы

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    width:100%; 
    display: inline-block; 
    text-align: center; 
} 

li { 
    display: inline-block; 

    width: 100px; 
} 

li a { 
    display: block; 
    color: yellow; 
    text-align: center; 
    text-decoration: none; 
    position: relative; 
    padding: 10px; 
    top:5px; 

} 

li a:hover { 
    background-color: #111; 
} 

https://fiddle.jshell.net/Rajkumarrana/12fsmyzg/