HTML无序列表布局
生活随笔
收集整理的這篇文章主要介紹了
HTML无序列表布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、圖片和文字在同一行
<img src="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="image/icon-dianhua.png" alt="" class="dis_ver"><div class="dis_ver">130000000</div></li><li><img src="image/icon-youxiang.png" alt="" class="dis_ver"><div class="dis_ver">www.baidu.com</div></li><li><img src="image/icon-zuoji.png" alt="" class="dis_ver"><div class="dis_ver">(0531)5800000</div></li><li><img src="image/icon-youbian.png" alt="" class="dis_ver"><div class="dis_ver">250000</div></li><li><img src="image/icon-dingwei.png" alt="" class="dis_ver"><div class="dis_ver">山東濟南泉城廣場</div></li></ul></body></html>總結
以上是生活随笔為你收集整理的HTML无序列表布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Native Library在Net
- 下一篇： 2017年html5行业报告,云适配发布