如图：

代码:(需要将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. 浅谈范德蒙德(Vandermonde)方阵的逆矩阵的求法以及快速傅里叶变换(FFT)中IDFT的原理

    浅谈范德蒙德(Vandermonde)方阵的逆矩阵与拉格朗日(Lagrange)插值的关系以及快速傅里叶变换(FFT)中IDFT的原理 标签: 行列式 矩阵 线性代数 FFT 拉格朗日插值 只要稍微看 ...

  2. [转]Robotium环境搭建中的Errors running builder 'Android Resource Manag

    转自:http://blog.sina.com.cn/s/blog_68f262210102v75t.html 最近学习了Robotium测试框架,当然学习任何一个框架或是语言之前,第一步就是搭建环境 ...

  3. SQL Server 行列相互转换命令：PIVOT和UNPIVOT使用详解

    一.使用PIVOT和UNPIVOT命令的SQL Server版本要求 1.数据库的最低版本要求为SQL Server 2005 或更高. 2.必须将数据库的兼容级别设置为90 或更高. 3.查看我的数 ...

  4. Java基本语法---个人参考资料

    Java语言基础组成:关键字.标识符.注释.常量和变量.运算符.语句.函数.数组 一．标识符 标识符是在程序中自定义的一些名称,由大小写字母[a-zA-Z],数字[0-9],下划线[ _ ],特殊字符 ...

  5. 模拟QQ聊天与视频聊天同时进行-------java基础知识总结

    前言:多线程的知识 代码: package com.day13.math; /** * 类说明 :模拟QQ聊天与视频聊天同时进行 * @author 作者 : chenyanlong * @versi ...

  6. OOP的函数方法

    <?php class Computer{ //我要创建一个构造方法 public function __construct(){ echo '我是比较先进的构造方法!'; //构造方法一般用于 ...

  7. Object和泛型

    这俩东东呢实现的效果是一样的,但是它们俩的效率不一样,原理也不一样.直接说结论吧,泛型比Object好用,效率高.因为Object有一个装箱和拆箱的过程,倘若是很多的数据那效率就低到不行了,而泛型没有 ...

  8. 【问题收集·知识储备】Xcode只能选择My Mac，不能选择模拟器如何解决？

      网友问题:请问打开一个应用,只能选择My Mac,不能选择模拟器如何解决? 答案:             下面将问答过程记录如下:     CHENYILONG Blog 请问打开一个应用,只能 ...

  9. 两个不能同时共存的条件orWhere查询

    举例: //我的所有的积分记录 1,我分享的:2,我点击的:(两个条件不能共存) $activity_log = ActivitySharedLog::where(function ($query) ...

  10. CF734F Anton and School (构造)

    \(solution\) : 这道题做法很巧妙,需要对位运算有足够了解: $( a $ & $ b )$ \(+\) $( a $ | $ b )$ \(=\) \(a+b\) ,所以有 \( ...