如图：

代码:(需要将li中vertical-align属性设置为bottom)

<ul style="margin-top:50px">

　　<li style="background-color:#19b955;display:inline-block;width:120px;height:60px;font-size:22px;text-align:center;line-height:60px;color:#fff">
　　　　描述
　　</li>

　　<li style="vertical-align:bottom;display:inline-block;width:120px;height:50px;font-size:18px;background-color:#e0e0e0;line-height:50px;text-align:center">
　　附加信息
　　</li>

</ul>

CSS------让ul中高度不同的li底部对齐的更多相关文章

  1. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

  2. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  3. Html中怎么用CSS让ul中多个li标签不换行横排显示

    布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block  --> 他们推荐我用这个 } 具体描述 ...

  4. jquery获取ul中的第一个li

    $("ul li:first"); $("ul li").eq(0);$("ul li").first();$("ul li&qu ...

  5. Javascript DOM 02 在<ul>中创建、删除 <li>

    创建DOM元素 createElement(标签名)  创建一个节点 appendChild(节点)  追加一个节点 例子:为ul插入li 插入元素 insertBefore(节点, 原有节点)  在 ...

  6. css控制ul标签下的指定li标签样式

    ul li:first-child{ }  第一个ul li:last-child{ }   最后一个ul li:nth-child(4){ } 指定第几个,4就是代表第四个ul li:nth-chi ...

  7. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  8. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  9. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

随机推荐

  1. 【BZOJ1047】[HAOI2007]理想的正方形（单调队列，动态规划）

    [BZOJ1047][HAOI2007]理想的正方形(单调队列,动态规划) 题面 BZOJ 洛谷 题解 直接一个单调队列维护一下没给点和它前面的\(n\)个位置的最大值,再用一次单调队列维护连续\(n ...

  2. 【bzoj4730】 Alice和Bob又在玩游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=4730 (题目链接) 题意 给出一个森林,两个人轮流操作,每次把一个节点以及它的祖先全部抹去,无节点可 ...

  3. oracle系统表v$session、v$sql字段说明

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  4. 关于NIO一些优化

    1. 使用NIO开发web服务,传输文件内容,可以使用FileChannel.transferTo(position,count,socketChannel)来提升性能: 经过测试,确实能提升10% ...

  5. Java体验的重点难点-----总结

    1.关于JVM原理:http://www.cnblogs.com/zhanglei93/p/6590609.html 2.关于垃圾收集机制:http://www.cnblogs.com/zhangle ...

  6. Python教你找到最心仪的对象

    规则 单身妹妹到了适婚年龄,要选对象.候选男子100名,都是单身妹妹没有见过的.百人以随机顺序,从单身妹妹面前逐一经过.每当一位男子在单身妹妹面前经过时,单身妹妹要么选他为配偶,要么不选.如果选他,其 ...

  7. python---django中自带分页类使用

    请先看在学习tornado时,写的自定义分页类:思路一致: python---自定义分页类 1.基础使用: 后台数据获取: from django.core.paginator import Pagi ...

  8. Spark记录-Scala循环语句

    Scala while循环语句 当给定条件为真时,while循环重复一个语句或一组语句.它在执行循环体之前测试条件状态. 只要给定的条件为真,while循环语句重复执行目标语句. object Dem ...

  9. bzoj千题计划203：bzoj3994: [SDOI2015]约数个数和

    http://www.lydsy.com/JudgeOnline/problem.php?id=3994 设d(x)为x的约数个数,给定N.M,求 用到的一个结论: 证明: 枚举n的约数i,枚举m的约 ...

  10. 论文中“but”与“however”的区别