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

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. lintcode-59-最接近的三数之和

    59-最接近的三数之和 给一个包含 n 个整数的数组 S, 找到和与给定整数 target 最接近的三元组,返回这三个数的和. 注意事项 只需要返回三元组之和,无需返回三元组本身 样例 例如 S = ...

  2. React & styled component

    React & styled component https://www.styled-components.com/#your-first-styled-component tagged t ...

  3. [剑指Offer] 24.二叉树中和为某一值的路径

    [思路] ·递归先序遍历树, 把结点加入路径. ·若该结点是叶子结点则比较当前路径和是否等于期待和. ·弹出结点,每一轮递归返回到父结点时,当前路径也应该回退一个结点 注:路径定义为从树的根结点开始往 ...

  4. [剑指Offer] 10.矩形覆盖

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? [思路]可归纳得出结论: f(n) = f(n-1) + f ...

  5. BZOJ5340 [Ctsc2018]假面 【概率dp】

    题目链接 BZOJ5340 题解 我们能很容易维护每个人当前各种血量的概率 设\(p[u][i]\)表示\(u\)号人血量为\(i\)的概率 每次攻击的时候,讨论一下击中不击中即可转移 是\(O(Qm ...

  6. Codeforces 931.D Peculiar apple-tree

    D. Peculiar apple-tree time limit per test 1 second memory limit per test 256 megabytes input standa ...

  7. python3初识selenium

    第一步:安装与配置 1.电脑上需要有火狐浏览器(默认安装在C:\Program Files (x86)\Mozilla Firefox目录下). 2.使用pip install selenium安装好 ...

  8. nginx反向代理Tomcat/Jetty获取客户端IP地址

    使用nginx做反向代理,Tomcat服务器和Jetty服务器如何获取客户端真实IP地址呢?首先nginx需要配置proxy_set_header,这样JSP使用request.getHeader(& ...

  9. a标签的download属性简介

    最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚 ...

  10. 'express' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    新安装了express,但是当查看版本号输入: express -v 时出现如下错误: 网上查找了相关资料才发现express查看版本 的命令是 express -V (即V大写) 再次尝试: 发现同 ...