How to align <li> to the bottom border of <ul> with CSS? _html/css

How to align

to the bottom border of

with CSS? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:18:49

Original

1591 people have browsed it

css html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>UL与LI对齐</title><style type="text/css">ul.menu{	font-size:18px;	list-style-type:none;	margin:0;	margin-left:20px;	padding:0;	float:left;}ul.menu li{	float:left;	width:100px;	line-height:24px;	border:#CCC 2px solid;	border-bottom-color:#FFF;}ul.menu li.selected{	font-weight:bold;	float:left;	width:120px;	line-height:30px;	border:#CCC 2px solid;	border-bottom-color:#FFF;}ul.menu li:hover{	background-color:#0CF;}</style></head><body><ul class="menu">	<li class="selected">NO.1</li>    <li>NO.2</li>    <li>NO.3</li></ul></body></html>

Copy after login

Displayed situation:

I want all the

tags to align with the lower border of the

Reply to discussion (solution)

ul.menu li {float: left;width: 100px;line-height: 24px;border: #CCC 2px solid;border-bottom: none;vertical-align: bottom;height: 25px;}

Copy after login

CSS code?123456789ul.menu li {float: left;width: 100px;line-height: 24px;border: #CCC 2px solid;border-bottom: none;vertical-align: bottom ;height: 25px;}
You try
height: 25px; You can adjust it yourself
...
It still doesn’t work... My purpose is to make the li of the selected item appear larger and highlight the selection feeling.
So it is still a tabbed style, so the lower parts of all

are required to be aligned...

Your requirement is contradictory.
According to the settings of lz, both ul and li are floating, and the li are floating and arranged from left to right. If you want to change the style of the selected li, the line height will also be increased by 6px. Such consequences Just to increase the height of the ul, some of the other li will be free. There is no need to change the font like this for the tab effect. You can set a bevel effect (by setting the border upper left border, lower right border), etc. to highlight the current option.

Your needs are contradictory.
According to the settings of lz, both ul and li are floating, and the li are arranged from left to right. If you want to change the style of the selected li, the line height will also be increased by 6px. This will result in Just to increase the height of the ul, some of the other li will be free. There is no need to change the font like this for the tab effect. You can set a bevel effect (by setting the border upper left border, lower right border), etc. to highlight the current option.
I know that it can be highlighted through borders, but here I mainly want to know what to do if I want to create different effects of high and low...
It is precisely because I know that the ul is stretched that I want to know how to align the li The lower border of ul...

This is mainly achieved by vertical-align: bottom
But after float is applied to li, vertical-align: bottom will not work
Remove the float of li, Vertical-align: bottom is available after switching to display:inline-block.
Try this style:
```
ul.menu{    font-size:0;    list-style-type:none;    margin:0;    margin-left:20px;    padding:0;    float:left;} ul.menu li{    display: inline-block; font-size:18px;    width:100px; vertical-align: bottom;    line-height:24px;    border:#CCC 2px solid;    border-bottom-color:#FFF;} ul.menu li.selected{    font-weight:bold;    width:120px;    line-height:30px;    } ul.menu li:hover{    background-color:#0CF;}
```
Copy after login
I just say you can adjust it yourself. ul.menu li This attribute you add goes beyond hiding. Then remember to increase the value of line-height:. You can try it yourself by how much you want to increase it.