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

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. 【转】cocos2dx 3.x 集成protobuf

    http://www.cnblogs.com/chevin/p/6001872.html vs2013+cocos2dx 3.13.1 这篇博文是集成Lua版本的protobuf,集成C++版本的过程 ...

  2. 时间戳转换成日期的js

    在项目开发过程中,我们常常需要把时间戳转换成日期.下面这个是我一直使用的js方法,希望能帮助到有需要的朋友.大家如果有更好的方法,请多多指教! js代码如下: //时间戳转换成日期 function ...

  3. elementUI的导航栏怎么根据路由默认选中相关项

    1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> ...

  4. vue2.0中vue-router使用总结

    #在vue-cli所创建的项目中使用 进入到项目的目录后使用  npm install vue-router --save  安装vue-router,同时保存在webpack.Json配置文件中,然 ...

  5. text-overflow使用文字超多div的宽度或超过在table中<td>

    关键字:text-overflow:ellipsis 语法:text-overflow:clip | ellipsis 取值 clip:默认值.不显示省略标记(...),而是简单的裁切. ellips ...

  6. 8086汇编语言 调用声卡播放wav文件(sound blaster)

    开更 大概最后做了一个能播放无损音乐(无压缩.不需解码)的播放器 原理是基于dosbox的模拟声卡,通过硬件之间的相互通讯做到的 关于详细内容接下来再讲. 一.从dosbox入手 我们知道cpu可以直 ...

  7. 【算法】Prüfer编码 —— HNOI2004树的计数

    的确,如果不知道这个编码的话的确是一脸懵逼.在这里放一篇认为讲的很详细的 BLOG,有关于编码的方式 & 扩展在里面都有所提及. 欢迎点此进入 --> 大佬的博客 在这里主要想推导一下最 ...

  8. Java操作Redis存储对象类型数据

    背景描述      关于JAVA去操作Redis时,如何存储一个对象的数据,大家是非常关心的问题,虽然官方提供了存储String,List,Set等等类型,但并不满足我们现在实际应用.存储一个对象是是 ...

  9. 安徽师大附中%你赛day9 T3 贵 解题报告

    贵 问题描述 苟先生的狼狗大军没有追上富先生, 所以他把它们都解雇了, 决定去雇佣一些更好的狗, 不过狗可是很贵的.苟先生有 \(w\) 元钱, 有 \(n\) 条狗可以雇佣, 第 \(i\) 条狗有 ...

  10. 【BZOJ 4500 矩阵】

    Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 390  Solved: 217[Submit][Status][Discuss] Description ...