先上要实现的效果图：

方案一：来自卢兄：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .wrap { width: 960px; margin:0 auto; text-align: center; font-size: 14px; line-height: 1.41; }

        .dear { color: #f00; text-align: left; }

        em { color: #f00; font-style: normal; }

        .btn {display: inline-block;*display: inline;*zoom:1;width: 150px;line-height: 40px;color:#fff;background-color: #f00;text-align: center;text-decoration: none;border-radius: 3px;}

    </style>

</head>

<body>

<div class="wrap">

    <p class="dear">亲爱的:</p>

    <p class="content">恭喜您，您仅需开通<em>4个月</em>会员，想休息休息，差额享受<em>8折优惠</em></p>

    <a class="btn" href="javascript:;">立即升级</a>

    <p class="now">已有<em>23919</em>人享此优惠</p>

</div>

</body>

</html>

效果图：

方案二：来自王胖兄:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .out{width: 90%;padding: 0.5%;border: solid 5px green}

        .in{display: inline-block}

        .gray{color:#666666}

        .red{color: red}

        .tc{text-align: center}

        .tl{text-align: left;}

        .btn {display: inline-block;*display: inline;*zoom:1;width: 150px;line-height: 40px;color:#fff;background-color: #f00;text-align: center;text-decoration: none;border-radius: 3px;}

    </style>

</head>

<body>

<div class="out tc">

    <div class="in tl">

        <p class="red">亲爱的蓝色月光:</p>

        <p class="gray ">恭喜您获得快速升级年费资格，您仅需开通<span class="red">4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span class="red">8折优惠</span>哦!</p>

        <p class="tc"><a href="#" CLASS="btn">立即升级</a></p>

    </div>

</div>

</body>

</html>

效果图：

当然还有方案三：来自这个问题的原作者：http://www.cnblogs.com/starof/p/4832947.html

当然方案四：lz还没有实现，不过贴出来 作为反面教材给大家吧：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>demo of starof</title>

    <style>

        .top{

            margin:0 5%;

            text-align:center;

        }

        .top span{

            color:red;

        }

    </style>

</head>

<body>

<div class="top">

    <div style="float: left"><span>亲爱的starof:</span></div>

    <div style="clear: both"></div>

    <p class="first">

        恭喜您获得快速升级年费资格，您仅需开通<span>4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span>8折优惠</span>哦!

    </p>

    <div>

        <button>亲爱的</button>

    </div>

</div>

</body>

</html>

display: inline-block 的神奇效果的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  10. display：block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

随机推荐

  1. 12.URL重写

    为什么要URL重写?1.有利于SEO(搜索引擎优化),带参数的RUL权重较低.2.地址看起来更正规,推广uid. 如我们一般在访问网页是会带参数,http://aaa.com/view.htm?id= ...

  2. sql server 2008中id如何设为自增

    通过 IDENTITY 来设置 参数有2个,一个是“初始值” 一个是“增量”.默认情况下 INSERT 语句中,不能对 IDENTITY 的字段进行赋值. create table web_produ ...

  3. 【转】关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系

    原文网址:http://www.cnblogs.com/cywin888/p/3263027.html 刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成 ...

  4. Flume FileChannel优化（扩展）实践指南

    本文系微博运维数据平台(DIP)在Flume方面的优化扩展经验总结,在使用Flume FileChannel的场景下将吞吐率由10M/s~20M/s提升至80M/s~90M/s,分为四个部分进行介绍: ...

  5. （转载）C++创建对象的两种方法

    (转载)http://blog.sina.com.cn/s/blog_586b6c050100dhjg.html 在C++里,有两种方法创建对象: 方法一: ClassName object(para ...

  6. struts2错误：The Struts dispatcher cannot be found.

    struts2错误:The Struts dispatcher cannot be found. The Struts dispatcher cannot be found. This is usua ...

  7. zoj 3805 Machine

    Machine Time Limit: 2 Seconds      Memory Limit: 65536 KB In a typical assembly line, machines are c ...

  8. Cogs 1709. [SPOJ705]不同的子串 后缀数组

    题目:http://cojs.tk/cogs/problem/problem.php?pid=1709 1709. [SPOJ705]不同的子串 ★★   输入文件:subst1.in   输出文件: ...

  9. yum puppet 并整合控制台

    上篇说了下在ubuntu12.04上安装puppet,安装的版本为puppet2.7.11版本,今天尝试了下在CentOS6.4系统上安装puppet 3.1.1版本,本文参考chenshake的文章 ...

  10. head frist 设计模式学习之 JVM中的博物馆奇妙夜（观察者模式）

    博物馆奇妙夜! 博物馆奇妙夜!博物馆奇妙夜!重说三!!!JVM看了<博物馆奇妙夜>电影之后,决定在自己家里开一个博物馆!毕竟需要什么new一下就好,博物馆很快就开起来了,并且任命你为馆长( ...