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

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. Hash表 算法的详细解析

    http://xingyunbaijunwei.blog.163.com/blog/static/76538067201111494524190/ 什么是HashHash,一般翻译做“散列”,也有直接 ...

  2. 我和C语言程序

    姓名:江超鸿 学号:160809129 爱好:打台球.听音乐 博客地址:https://www.cnblogs.com/jiangchaohong/ C语言:对于c语言程序来说,我是第一次接触,对它的 ...

  3. 在C/C++程序中打印当前函数调用栈

    前几天帮同事跟踪的一个程序莫名退出,没有core dump(当然ulimit是打开的)的问题.我们知道,正常情况下,如果程序因为某种异常条件退出的话,应该会产生core dump,而如果程序正常退出的 ...

  4. microtime()

    PHP函数microtime()返回当前 Unix 时间戳和微秒数.

  5. C++ 点

    2017/12/23 scoped_ptr类型的指针,只能在一个namespace中使用 1) 怎么查看元素在set中是否存在 1) istringstream类用于执行C++风格的串流的输入操作. ...

  6. 【bzoj2809】[Apio2012]dispatching 贪心+可并堆

    题目描述 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 Master以外,每名忍者都有且仅有一个上级.为保密,同时增 ...

  7. jQuery插件jquery.fullPage.js

    简介如今我们经常能看到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或者色块做背景,再添加一些简单的内容,显得格外的高端大气上档次,比如 iPone 5C 的介绍页面.QQ浏览器的官方网站.百度史 ...

  8. BZOJ4537 HNOI2016最小公倍数(莫队+并查集)

    考虑边只有一种权值的简化情况.那么当且仅当两点可以通过边权<=x的边连通,且连通块内最大边权为x时,两点间存在路径max为x的路径.可以发现两种权值是类似的,当且仅当两点可以通过边权1<= ...

  9. bootstrap-table 增加序号列(支持分页)

    columns: [ { checkbox: true }, { title: '序号', align: 'center', halign: 'center', formatter: function ...

  10. 【题解】SHOI2001化工厂装箱员

    ————传送:洛谷P2530 这道题目还是挺简单的,状态也容易想到. 数据范围非常的小,所以即便是很多维度,复杂度也完全可以接受.定义状态:dp[i][a][b][c]为手上的货物拿到第i个时三种物品 ...