css项目列表如何水平放置
列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置
1
|
li{ float : left ;} |
示例如下:
创建Html元素
123456<
ul
>
<
li
>itemlist-1</
li
>
<
li
>itemlist-2</
li
>
<
li
>itemlist-3</
li
>
<
li
>itemlist-4</
li
>
</
ul
>
设置css样式
12ul{
width
:
500px
;
height
:
50px
;
line-height
:
50px
;
padding
:
10px
25px
;
border
:
4px
solid
#ebcbbe
;}
li{
padding
:
0
20px
;
float
:
left
;}
观察显示效果
css项目列表如何水平放置的更多相关文章
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
- CSS控制列表与导航的制作
<style type="text/css"> /*body默认是有边距的*/ body{ margin:0;} /*ul默认是有边距的所以先将边距去掉IE78只要加上 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 常用的CSS属性列表汇总
常用的CSS属性列表汇总 近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...
- CSS构造列表
列表图片 背景列表 翻转列表 水平导航 内边距与外边距 Ul { List-style-type:none; Margin: 0; Padding: 0; } 使用图片作为列表图标 Ul { Marg ...
- bootstrap实现去点列表、内联列表、水平定义列表
内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-uns ...
- CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- 学习笔记 第八章 使用CSS美化列表
第8章 使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
随机推荐
- 【PHP】- include、require、include_once 和 require_once的区别
1.include:会将指定的档案读入并且执行里面的程序. 被导入的档案中的程序代码都会被执行,而且这些程序在执行的时候会拥有和源文件中呼叫到 include() 函数的位置相同的变量范围( ...
- TCP的挥手协议和握手协议
三次握手协议:三次握手协议的主要过程是交互彼此之间的初始序列号,如果没有确认的ACK帧可以么?肯定是可以的 client A -------> server B client A 发送了自己的初 ...
- php数据缓存到文件类设计
// 自定义缓存类 class Cache_Filesystem { // 缓存写保存 function set ($key, $data, $ttl) { //打开文件为读/写模式 $h = fop ...
- BZOJ2753 [SCOI2012]滑雪与时间胶囊 【kruskal】
题目链接 BZOJ2753 题解 完了我连\(kruskal\)裸题都做不出来了.. 题目是求最小树形图,即有向图最小生成树 我们不能直接上\(kruskal\),而要保证先加入前面的点, 所以我们排 ...
- 雪碧图background-position的rem用法
background的雪碧图配合rem就正常写即可,要加上background-size,大小为sprites的原图尺寸,宽高为一帧的尺寸.例如: .player{ width: 2.32rem; / ...
- vector 搜索
http://classfoo.com/ccby/article/cIBahI #include <iostream> #include <algorithm> #includ ...
- Linux(CentOS)用split命令分割文件
在 Linux 里,稍加不注意有可能会产生很大体积的日志文件,哪怕几百M,拖下来分析也很浪费时间,这个时候,如果可以把文件切割成 N 个小文件,拿最后一个文件就可以看到最近的日志了.有一些手段,比如用 ...
- JavaScript 页面间传值
转自:http://blog.csdn.net/qq380107165/article/details/7330612 一:JavaScript静态页面值传递之URL篇 能过URL进行传值,把要传递的 ...
- Sqlserver面试题
1.用一条SQL语句 查询出每门课都大于80分的学生姓名 name kecheng fenshu 张三 语文 81张三 数学 75李四 语文 ...
- bzoj1577 [Usaco2009 Feb]庙会捷运Fair Shuttle
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1577 [题解] 我们把每坨奶牛按s排个序. 对于每坨奶牛,如果车上有空位置就塞. 否则,看下 ...