有两种创建水平导航栏的方法。使用行内或浮动列表项。

如果您希望链接拥有相同的尺寸,就必须使用浮动方法。

1、构建水平导航栏的方法之一是将 <li> 元素规定为行内元素:

display:inline; - 默认地,<li> 元素是块元素。在这里,我们去除了每个列表项前后的换行,以便让它们在一行中显示。

2、对列表项进行浮动

为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:

li
{
float:left;
}
a
{
display:block;
width:60px;
}

float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

【CSS】使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页的更多相关文章

  1. iText + Freemarker实现pdf的导出,支持中文、css以及图片,页眉页脚,页眉添加图片

    本文为了记录自己的实现过程,具体的实现步骤是参考博文 https://www.cnblogs.com/youzhibing/p/7692366.html 来实现的,只是在他的基础上添加了页眉页脚及页眉 ...

  2. 关于JavaScript打印去掉页眉页脚

    因为这个问题,Google和百度都查了个遍,网上主要解决方案都是这一个代码: <script language="JavaScript"> var hkey_root, ...

  3. C#word(2007)操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化

    转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...

  4. 【Itext】7步制作Itext5页眉页脚pdf实现第几页共几页

    itext5页眉页脚工具类,实现page x of y 完美兼容各种格式大小文档A4/B5/B3,兼容各种文档格式自动计算页脚XY轴坐标 鉴于没人做的这么细致,自己就写了一个itext5页眉页脚工具类 ...

  5. C# 操作Word页眉页脚——奇偶页/首页不同、不连续设置页码、复制页眉页脚、锁定页眉页脚、删除页眉页脚

    前言 本文是对Word页眉页脚的操作方法的进一步的阐述.在“C# 添加Word页眉页脚.页码”一文中,介绍了添加简单页眉页脚的方法,该文中的方法可满足于大多数的页眉页脚添加要求,但是对于比较复杂一点的 ...

  6. C# 如何添加Excel页眉页脚(图片、文字、奇偶页不同)

    简介 我们可以通过代码编程来对Excel工作表实现很多操作,在下面的示例中,将介绍如何来添加Excel页眉.页脚.在页眉处,我们可以添加文字,如公司名称.页码.工作表名.日期等,也可以添加图片,如LO ...

  7. ★itext-为pdf文件添加页眉页脚 | 3步完成 |

    由于上一篇自定义生成pdf的功能需求又增加了,需要加上页码.所以本博客诞生了~ 1. 通过继承PdfPageEventHelper类,实现需要实现的方法 import com.lowagie.text ...

  8. itext 生成pdf文件添加页眉页脚

    原文来自:https://www.cnblogs.com/joann/p/5511905.html 我只是记录所有jar版本,由于版本冲突及不兼容很让人头疼的,一共需要5个jar, 其中itextpd ...

  9. c# iText 生成PDF 有文字,图片,表格,文字样式,对齐方式,页眉页脚,等等等,

    #region 下载说明书PDF protected void lbtnDownPDF_Click(object sender, EventArgs e) { int pid = ConvertHel ...

随机推荐

  1. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  2. 撩课-Web大前端每天5道面试题-Day16

    1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { ...

  3. IntelliJ IDEA 2018.3 安装+永久激活[Windows]

    IntelliJ IDEA 作为一个优秀的Java开发环境,深受许多开发者喜爱,但是它的价格却贵得让人无法接受,这篇文章将介绍永久激活IntelliJ IDEA的方法(使用破解补丁). 系统环境:Wi ...

  4. golang rpc 简单范例

    RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议. 它的工作流程如下图:   go ...

  5. js-99乘法表的练习

    <html> <head> <title>World</title> <style type="text/css"> & ...

  6. react打包开发文件的步骤(上传给线上环境)

    cd进入ReleaseProject目录,然后运行npm start,系统会自动在public目录下面完成打包工作,然后我再把  public文件下压缩位public.rar上传即可:(public文 ...

  7. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  8. 转:centos7.2安装jdk1.6和/etc/profile不生效问题

    转:centos7.2安装jdk1.6和/etc/profile不生效问题 转自:http://blog.csdn.net/cuker919/article/details/54178611 一.查看 ...

  9. spring 与mybatis 整合总结

    刚看完同学给我的代码,我忍不住爆粗.去TMD,写得像坨屎,恶心,乱七八糟,这让我怎么交差??一行代码注释都没有,还很自以为是的傲慢.“这都不懂?这就是Mybatis啊,有很多种方法实现.....” 操 ...

  10. JS 根据子网掩码,网关计算出所有的IP范围

    // 验证IP的正则 var ip_reg = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0- ...