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++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
随机推荐
- JDK源码分析 – Integer
Integer类的申明 public final class Integer extends Number implements Comparable<Integer> { … } Int ...
- javasisst & JAVA8
今天在服务器上启动tomcat7的时候,提示如下异常: java.io.IOException: invalid constant type: 15 具体看是javasisst抛出来的. 系统运行环境 ...
- hibernate多表查询
一对多进行查询(用懒加载的模式) 查找区域所对应的街道: Dao: public Qu selQu(String dno){ Session session=HibernateSessionFacto ...
- 将CRUD封装到一个工具类中
package org.zln.hibernate.utils; import org.hibernate.Session; import org.hibernate.SessionFactory; ...
- HDFS集群和YARN集群
Hadoop集群环境搭建(一) 1集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据的存储,集群中的角色主要 ...
- 2017南开ACM校赛(网络赛) 民间题解
orz 首先说一下这个只是民间题解,可能会有很多错误 程序还没有评测,所以可能存在问题 C题比赛的时候没想到..后来发现是个模板题,所以没有代码 希望这份题解能对读者有所启发吧... A题 直接倒序枚 ...
- node安装
由于Node.js平台是在后端运行JavaScript代码,所以,必须首先在本机安装Node环境. 安装Node.js 目前Node.js的最新版本是7.6.x.首先,从Node.js官网下载对应平台 ...
- eclipse 主题文件配置
eclipse市场搜索 Eclipse Color Theme ----用于控制文本域主题 Eclipse 4 Chrome Theme chrome风格的主题 最新的:Jeeeyul's Them ...
- 问题总结——window平台下grunt\bower安装后无法运行的问题
一.问题: 安装grunt或者bower后,在cmd控制台运行grunt -version 或者 bower -v会出现:“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”,
- Rem与em的简单理解
Rem与em的简单理解 Em单位与像素px的转换 所得的像素值 = 当前元素的font-size * em的值 比如:div的font-size:12px 10em等同于120px 12*10 =12 ...