`

li横向排列

阅读更多
方法一:直接带<li>里面加样式来实现

<ul style="list-style:none;">
<li style="display:inline">我要横向排列</li>
<li style="display:inline">Adding's Blog</li>
</ul>

方法二:通过定义li的CSS来实现

<style type="text/css">
<!--
li {
 background-color: #CCCCCC;
 text-align: center;
 float: left;
 width: 70px;
 margin: 3px;
 padding: 3px;
 list-style-type: none;
}
-->
</style>

<ul>
  <li>首页  </li>
  <li>新闻中心</li>
  <li>产品</li>
  <li>在线反馈</li>
  <li>服务</li>
  <li>联系</li>
</ul> 
分享到:
评论

相关推荐

    CSS实现ul和li横向排列的两种方法

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法: float:left 这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除...

    CSS的ul和li实现横向排列和去掉li的点

    怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,在此与大家分享下,感兴趣的朋友可以参考下,以备不时之需

    用ul、li标签创建css横向导航菜单示例

    现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)来标识。再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的,因为我们习惯于把...

    CSS动态条形加载条效果的示例代码

    运用了css变量的知识,直接上代码及其我加的注释 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...meta charset="utf-8"&gt;... /* 设定li元素横向排列 */ } .loading { width: 200px; height

    web前端开发基本问题解决

    如何让三列横向排列 通用的加入收藏夹代码 复制到系统剪贴板之IE,ff兼容版 javascript为FF设置首页 IE6使用滤镜使PNG图片透明后,容器内链接失效的问题 禁用文本框中文输入法的通用方法 我不是原创,我支持原创,我...

    Web前端开发基础:CSS控制-标记制作导航菜单.ppt

    项目列表 列表的符号 图片符号列表 竖直排列导航菜单 横向导航菜单 传统的HTML语言提供了项目列表的基本功能,包括顺序式列表的标记和无顺序列表的标记等。当引入CSS后,项目列表被赋予了很多新的属性,甚至超越了它...

    详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

    从以上两张图中可以看出添加浮动元素后,li元素按照规则横向排列,但是父元素却消失不见了。   为父元素添加一个5px的边框,在li元素添加浮动后,边框并没有被内容撑开。 在第一个示例中仿佛父元素消失了,但在第...

    js实现时间轴自动排列效果

    效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;timeline&lt;/title&gt;... ul,li{ list-style: none; } body{ font-fam

    详解Python Matplotlib解决绘图X轴值不按数组排序问题

    在用Matplotlib库绘制折线图的时候遇到一个问题,当定义一个x轴数组时,plot绘制折线图时,x轴并不会按照我们定义的数组的顺序去排列显示,例如: import matplotlib.pyplot as plt colums_x = ['aa','bc','ad','bd...

    Python matplotlib画图时图例说明(legend)放到图像外侧详解

    用python的matplotlib画图时,往往需要加图例说明。如果不设置任何参数,默认是加到图像的内侧的最佳位置。 import matplotlib.pyplot as plt import numpy as np x = np.arange(10) fig = plt.figure() ...

    div+css有实例,易学易懂

    5.9 关于ul 和li 的样式详解 5.9.1 使用list-style-type 属 5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构...

    html入门到放弃笔记

    赵旭 ... ...1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问...

    css入门笔记

    ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...

Global site tag (gtag.js) - Google Analytics