CSS导航菜单水平居中的方法

CSS导航菜单水平居中的常用的几种方法

操作方法

  • 01

    首先打开我们的测试编辑工具 如图所示 新建一个项目

  • 02

    然后打开index.html文件 输入以下代码(代码我就不贴出来了,看图吧,接下来3-5步都是这个HTML文件)

  • 03

    首先第一个方法就是使用display:inline-block将ul标签设置成行内块级元素然后将li标签设置为左浮动即可

  • 04

    第二种方法就是就是将div设置为display:table;将ul设置成display:table-cell;即可

  • 05

    第三种方法就是使用display:inline-flex,css代码如图所示

  • 06

    这种方法的html是套用一个div即可 如图所示

  • 07

    然后将下图中的css代码写入CSS文件中 即可

  • 08

    以上的四种方法的运行后的界面都为这个

(0)

相关推荐

  • 网页css布局:div水平居中各种设置形式

    操作方法 01 网页制作Webjx文章简介:在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过, ...

  • 怎样制作网页下拉导航菜单

    网页下拉导航菜单制作工具硕思闪客菜单,能够制作出专业.简单的网页下拉导航菜单. 步骤/方法 01 只要浏览网页,都会接触过下拉导航菜单,可以说下拉导航菜单是计算机一切应用.程序.软件最为基本的构件.可 ...

  • win10右键边角导航菜单命令提示符变成Windows powerShell的解决方法

    在win10系统下,用户通过按win+X快捷键即可呼出系统管理窗口,再改窗口中包含有程序和功能.电源.事件查看器.网络连接.磁盘管理.cmd.搜索.关机等常见功能,通常情况下很多用户喜欢使用" ...

  • wps演示怎样制作下拉式导航菜单

    wps演示在工作使用过程中,一般都有好几张,甚至几十张,如果在任何一张幻灯片中想快速知道哪些内容在哪一页,且快速转到指定页,让你有一个明确的导航指示.该怎样制作呢?我们可以在wps演示中自己制作一个下 ...

  • win10系统将加密功能添加的右键菜单中的方法

    对于细心的用户会在win10系统下,发现包含一项文件.文件夹加密的功能,通常情况下我们可利用该功能对系统中的文件.文件夹进行加密,所加密后的文件必须输入密码才能够正常访问文件内容,通常情况下用户想要对 ...

  • Axure RP怎么设计一款导航菜单?

    Axure RP中想要设计一个导航菜单,该怎么设计呢?下面我们就来看看详细的制作过程. 一.前期准备 1.打开Axure RP软件,点击工程,选择页面样式编辑器,在页面样式编辑器里有对齐,字体选项,将 ...

  • 在网页中设计导航菜单的三个原则(附案例)

    导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航 ...

  • 设计语言 – 下拉菜单/导航菜单

    一个看似简单的下拉菜单/导航菜单,背后会有多少隐藏的逻辑呢? 今天就讲一下如何绘制下拉菜单和导航菜单.不管是下拉菜单还是导航菜单,都是设计语言部分中的基础部分中的某个组成部分.当这些组件按照功能和需求 ...

  • 如何利用html制作网页水平导航菜单?

    我们在利用html进行网站制作时,网站头部的水平导航菜单通常是必不可少的,许多初识html的小伙伴对于如何创建水平菜单可能有些疑惑,诸如:如何设置CSS样式达到自己想要的效果.接下来,我就为大家简单介 ...