目标：

　　使ul列表横排显示

现象：

　　谷歌OK，火狐竖排，IE竖排。

原因：

　　ul原css代码：

　　首先，去除点号，list-style:none;为了使其横排，使用了display:contents;该样式在IE上无法识别，在火狐上则不稳定。

解决方法：

　　将display:contents改成flex-direction: row;，保险起见，可以设置浮动和字体对齐都是左对齐。

ul列表li元素横排显示的IE兼容性问题的更多相关文章

  1. html中让多个li标签横排显示

    1.我们可以通过为ul标签下所有li标签设定样式“display:inline-block”的方式,让多个li标签横排显示 2.除了以上方法,我们还可以所有li标签使用float(浮动)的方式,让多个 ...

  2. ul的li元素水平并居中的css

    ul{ text-align:center; } li{ display:inline } 这样li元素不需要float且可以居中 比较好样式如下 ul li { // float: left; pa ...

  3. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  4. 清除li内a标签的float=left实现a标签在li内居中显示(ul内li不居中显示)

    写在前面: 修改cnblogs主页面菜单显示问题. 问题描述:在给主菜单添加hover样式后发现菜单内容并未居中.见图1. 网上搜索到资料其中一篇讲的可以说简明扼要了,也是伸手党的福利(点我查看原文) ...

  5. ul中li元素横向排列且不换行

    ul { white-space: nowrap; } li { display: inline-block; }     white-space 属性设置如何处理元素内的空白. normal 默认. ...

  6. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  7. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  8. ul列表元素在float：right后li元素倒转

    发现对li元素进行float:right后,虽然成功右浮动,但是的元素是倒转的 解决方案: 对ul进行右浮动,然后对li左浮动 结果

  9. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

随机推荐

  1. Android之View的绘制流程

    本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定实现细 ...

  2. 查看进程CPU、内存使用情况

    本文介绍通过ps和top查看进程的cpu.内存等使用情况. 1.ps命令 1.1 概览 ps命令相关参数定义: -e 或者-A,选择所有的进程: -L 显示线程: -o 自定义输出格式: 输出格式: ...

  3. Eclipse如何安装Fat Jar

    〇.安装前准备 1.Fat Jar插件下载地址:https://sourceforge.net/projects/fjep/files/ 2.安装前请确认Eclipse版本:Help --> A ...

  4. doctype是什么？

    1.<!doctype>声明必须处于HTML文档的头部,在<html>标签之前,HTML5中不区分大小写 2.<!doctype>声明不是一个HTML标签,是一个用 ...

  5. flutter 隐藏返回按钮 自定义返回按钮

    自定义返回按钮 //改变颜色 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: BackBu ...

  6. Selenium 2自动化测试实战20（操作cookie）

    一.操作cookie 有时候我们需要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删除 ...

  7. Maven 安装 / 常用配置 / 阿里maven中央仓库

    Maven 官方下载地址: http://maven.apache.org/download.cgi 可以选择清华的镜像: 解压在settings.xml里面配置阿里中央仓库: <mirror& ...

  8. git 新建项目的一些操作

    Command line instructions Git global setup git config --global user.name "Administrator" g ...

  9. video标签在移动端的一些属性值设置

    <video x5-video-orientation="portraint" src="" loop x-webkit-airplay="al ...

  10. string中getline，cin的方法getline(),get总结

    一.string中的getline不是string的成员函数,属于全局函数,使用需要include<string>,有两个重载版本: 函数原型参见:http://www.cplusplus ...