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

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. Luogu2737 USACO4.1麦香牛块(动态规划)

    小凯的疑惑升级版.只有两个数的话不能表示的最大数是ab-a-b,显然如果可选数增加不会比这更大,所以只要答案存在一定小于256*256-2*256.在这个范围内背包即可. #include<io ...

  2. [洛谷P3382]【模板】三分法

    题目大意:给出一个$N$次函数,保证在范围$[l,r]$内存在一点x,使得$[l,x]$上单调增,$[x,r]$上单调减.试求出$x$的值. 题解:求导,就变成了求零点,二分答案即可 卡点:无 C++ ...

  3. Android逆向之旅---爆破一款资讯类应用「最右」防抓包策略原理分析

    一.逆向分析 首先感谢王同学提供的样本,因为王同学那天找到我咨询我说有一个应用Fiddler抓包失败,其实对于这类问题,我一般都会这么回答:第一你是否安装Fiddler证书了,他说他安装了.第二你是否 ...

  4. 洛谷 P4168 [Violet]蒲公英 解题报告

    P4168 [Violet]蒲公英 题目背景 亲爱的哥哥: 你在那个城市里面过得好吗? 我在家里面最近很开心呢.昨天晚上奶奶给我讲了那个叫「绝望」的大坏蛋的故事的说!它把人们的房子和田地搞坏,还有好多 ...

  5. 【BZOJ 3772】精神污染 主席树+欧拉序

    这道题的内存…………………真·精神污染……….. 这道题的思路很明了,我们就是要找每一个路径包含了多少其他路径那么就是找,有多少路径的左右端点都在这条路径上,对于每一条路径,我们随便选定一个端点作为第 ...

  6. Codeforces 937.B Vile Grasshoppers

    B. Vile Grasshoppers time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. 1040: [ZJOI2008]骑士~基环外向树dp

    Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里,在和平环境中 ...

  8. python异常之with

    1.基本语法 with expression [as target]: with_body 参数说明: expression:是一个需要执行的表达式: target:是一个变量或者元组,存储的是exp ...

  9. vue2.0基础知识,及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  10. 转载:Java中的String与常量池

    转载自http://developer.51cto.com/art/201106/266454.htm.感觉总结的不错,自己收藏一下. string是java中的字符串.String类是不可变的,对S ...