如图：

代码:(需要将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. HGOI20180817 （NOIP模拟Day1 task）

    HGOI自测 初测:150=80+20+50 rank1~rank3(并列3个rank1,所以我是rank3 qwq) 今日分突然想简约 CF359A Table https://www.luogu. ...

  2. JavaScript--序列化以及转义

    一.序列化 1.1 序列化 将其他对象转换为字符串,用法:JSON.stringify() var li = [1,2,3,4]; var new_li = JSON.stringify(li); n ...

  3. node爬虫进阶版

    手写了一个方便爬虫的小库: const url = require('url') const glib = require('zlib') //默认头部 const _default_headers ...

  4. python---django初步了解以及安装(包括Django网页首次无法访问的原因及解决方法，以及在linux服务器上布置无法启动的原因)

    pip install Django 相关网站资源: Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是 ...

  5. JAVA记录-IntelliJ Idea 2017 免费激活方法（转载）

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  6. zsh与oh-my-zsh是什么

    zsh是bash的增强版,其实zsh和bash是两个不同的概念.zsh更加强大. 通常zsh配置起来非常麻烦,且相当的复杂,所以oh-my-zsh是为了简化zsh的配置而开发的,因此oh-my-zsh ...

  7. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

  8. Ubuntu 查看CPU温度

    按照这篇文章: http://www.webupd8.org/2014/06/psensor-updated-with-option-to-display.html

  9. 网页排版的时候不要忘了table标签

    [概况] DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.但有时候在布局的时候,纯粹的用div感觉嵌套的太 ...

  10. echo变量失败，提示：ECHO 处于关闭状态

    检查变量值,变量值为空就会提示关闭