Home >Web Front-end >HTML Tutorial >How to align
- with CSS? _html/css_WEB-ITnose
How to align
- with CSS? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:491604browse
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> Displayed situation:
I want all the25edfb22a4f469ecb59f1190150159c6tags to align with the lower border of theff6d136ddc5fdfeffaf53ff6ee95f185border
How to do it?
Thanks in advance...
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;} You try
height: 25px; You can adjust it yourself
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 25edfb22a4f469ecb59f1190150159c6 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;} 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.