列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置

1
li{float:left;}

示例如下:

  1. 创建Html元素

    1
    2
    3
    4
    5
    6
    <ul>
        <li>itemlist-1</li>
        <li>itemlist-2</li>
        <li>itemlist-3</li>
        <li>itemlist-4</li>
    </ul>
  2. 设置css样式

    1
    2
    ul{width:500px;height:50px;line-height:50px;padding:10px 25px;border:4px solid #ebcbbe;}
    li{padding:0 20px;float:left;}
  3. 观察显示效果

css项目列表如何水平放置的更多相关文章

  1. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  2. CSS控制列表与导航的制作

    <style type="text/css"> /*body默认是有边距的*/ body{ margin:0;} /*ul默认是有边距的所以先将边距去掉IE78只要加上 ...

  3. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  4. 常用的CSS属性列表汇总

    常用的CSS属性列表汇总 近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...

  5. CSS构造列表

    列表图片 背景列表 翻转列表 水平导航 内边距与外边距 Ul { List-style-type:none; Margin: 0; Padding: 0; } 使用图片作为列表图标 Ul { Marg ...

  6. bootstrap实现去点列表、内联列表、水平定义列表

    内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...

  7. CSS:列表样式(设置列表项的标志图案/位置)

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  8. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  9. 15个C++项目列表

    实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...

随机推荐

  1. tar 加密压缩和解密解压

    加密压缩 tar -czvf - file | openssl des3 -salt -k password -out /path/to/file.tar.gz 解密解压 openssl des3 - ...

  2. PokeCats开发者日志(六)

      现在是PokeCats游戏开发的第九天的晚上,终于将这玩意提交到360移动开放平台进行审核了.   貌似很多平台都需要看这个著作权证明,得了,那我就话400块钱走一遍流程玩玩吧!   办理著作权还 ...

  3. [Leetcode] Remove duplicates from sorted array ii 从已排序的数组中删除重复元素

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  4. 【BZOJ 3505】 [Cqoi2014]数三角形 容斥原理+排列组合+GCD

    我们先把所有三角形用排列组合算出来,再把一行一列上的三点共线减去,然后我们只观察向右上的三点共线,向左上的乘二即可,我们发现我们如果枚举所有的两边点再乘中间点的个数(GCD),那么我们发现所有的两边点 ...

  5. 如何优化JQuery each()函数的性能

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 01 $.fn.be ...

  6. 安卓recyclerview的基本使用

    1.先在布局文件中写 <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" a ...

  7. 用DOM解析XML ,用xpath快速查询XML节点

    XPath是一种快速查询xml节点和属性的一种语言,Xpath和xml的关系就像是sql语句和数据库的关系.用sql语句可以从数据库中快速查询出东西同样的用xPath也可以快速的从xml中查询出东西. ...

  8. CRM系统主要业务流程思维导图

    [CRM五策略]           ❶对客户进行分类,不是根据规模,而是根据和你的关系,越细腻越好:           ❷不定期更新客户资料,信息越全面越好:           ❸主动对客户进行 ...

  9. matlab求矩阵的鞍点

    function count = andian(a) v = max(a,[],2); count = 0; for i=1:length(v) [r2,c2] = find(a==v(i)); mi ...

  10. shell之流程控制

    一.if语句.while.for循环各种小例题 1.用户验证 [root@bogon ~]# cat buer.sh #!/bin/bash #user='buer' #password='1234. ...