HTML无序列表布局

1、图片和文字在同一行

<img src="data:image/icon-youxiang.png" alt="" class="dis_ver">
<div class="dis_ver">hello world</div>

观察到，img和div的class是相同的，都是“dis_ver”，则通过 display: inline-block 定义

    .dis_ver{display: inline-block;    }

2、 ul无序列表布局联系人信息

    <html><head><style>body{margin:0px;}/* .box1{border:1px solid black;width: 47%;box-sizing: border-box;padding: 30px;height: 200px;float: left;margin-left: 2%;margin-bottom: 5%;}.text1{display: flex;align-items: center;justify-content: space-between;}.left{width: 70%;line-height: 50px;background-color: red;text-align: center;font-size: 28px;}.right{width: 30%;line-height: 50px;background-color: yellow;text-align: center;font-size: 8px;} */.dis_ver{display: inline-block;      /* img和div，class都叫“dis_ver”，将图片与后面的文字放在一行内，否则图片在上，文字另起一行 */}.personalInfoList img{width:15px; }ul,li{border: 1px solid black;list-style-type: none;      /* 去除默认的小黑点 */}.personalInfoList{display: flex;                  /* 定义ul为灵活盒子。此时内部li排列都是横向 */flex-wrap: wrap;                /* 允许换行：内部li横向排列超出ul宽度时，自动换行 */width: 70%;padding-left: 0;}.personalInfoList li{width: 45%;                     /*45%+45%=90%<100%，两个li不换行，三个则换行*/margin-bottom: 4px;}   .personalInfoList li:last-child{    /*对最后一个li重新定义宽度*/width: 100%;}</style></head><body><!-- <div class="box1"><div class="text1"><div style="border: 1px solid black; font-size:50px;">hello!</div><div style="border: 1px solid black; ">world!</div></div></div><div class="box1"><div class="text1"><div class="left">hello!</div><div class="right">world!</div></div></div><div class="box1"></div><div class="box1"></div> --><ul class="personalInfoList"><li><img src="data:image/icon-dianhua.png" alt="" class="dis_ver"><div class="dis_ver">130000000</div></li><li><img src="data:image/icon-youxiang.png" alt="" class="dis_ver"><div class="dis_ver">www.baidu.com</div></li><li><img src="data:image/icon-zuoji.png" alt="" class="dis_ver"><div class="dis_ver">(0531)5800000</div></li><li><img src="data:image/icon-youbian.png" alt="" class="dis_ver"><div class="dis_ver">250000</div></li><li><img src="data:image/icon-dingwei.png" alt="" class="dis_ver"><div class="dis_ver">山东济南泉城广场</div></li></ul></body></html>

HTML无序列表布局相关推荐

html2day(合并单元格，有序、无序列表，input、select、textarea表单)
文章目录合并单元格步骤: 无序列表(unordered list): 有序列表(ordered list): 自定义列表(ordered list): 表单的组成: **表单标签**: input( ...
HTML使用无序列表制作一级菜单和二级下拉菜单
在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧. one: <!DOCTYPE html> <html lang=" ...
html5无序列表，有序列表，定义列表，组合标签，div分区标签
<!DOCTYPE html > <html lang="en"> <head><meta charset="UTF-8&quo ...
【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )
文章目录一.HTML 列表二.无序列表三.有序列表四.自定义列表一.HTML 列表列表是装载结构 , 样式一致的文字或图表的容器 ; 列表由于其整齐 , 整洁 , 有序 ...
下图无序列表的html标记,ul标签-无序列表
ul标签 - 无序列表 DIV+CSS的布局怎么能少的 ul 标签?ul 是 unordered lists 的缩写,中文意思"无序列表".有序列表的意思是使用编号来记录每个项目顺 ...
HTML6（无序列表，有序列表和自定义列表）
列表是用来布局的,列表最大的特点就是整齐,有序,它作为布局会更加方便简洁.主要分为三大类,无序列表,有序列表和自定义列表. 无序列表<ul>: <ul>标签表示HTML页面项目 ...
HTML列表详解（重点掌握无序列表）
第一部分列表的概念表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用情景不同,列表可以分为三大类:无序列表.有序列表和自定义 ...
html语言创建无序列表的标记是6,HTML-表格-列表-结构标记-表单
1.表格 1.表格语法 1.标记 1.表格 2.行 --table row 3.单元格/列 --table data 练习: 1.创建一个4行4列的表格 2.在table标记中嵌套tr 3.在tr中嵌 ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...

HTML无序列表布局

1、图片和文字在同一行

2、 ul无序列表布局联系人信息

HTML无序列表布局相关推荐

最新文章

热门文章