zoukankan      html  css  js  c++  java
  • 在一个div里,列表样式图片进行float,实现水平排序

    <div class="xiangce">
      <ul>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
        <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>     <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>     <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>     </ul>
    </div>

    这时一个div里面的列表图标链接样式,效果如下

    a:用line-style:none,将无序列表样式前符号;总是忘记用哪个元素,line-style:noneline-style:noneline-style:noneline-style:noneline-style:none

    b:在实现水平排列前,将a元素的文字部分置于图片的下方。

    首先想到了用display设置成块级元素block,刚开始只设置了文字,并没有出现效果,于是将img也设置成block,然后就、、、好了、、、;通过text-align:center,让文字处于图片下方的中心;

    c:最后对li设置float,让其靠左浮动float:left;

        随后用margin调整在div的分布,现在只会在浏览器中,一边调一遍看,找到合适的位置,再回css中改数据、、、、

    最终效果:

  • 相关阅读:
    JS的中数的取值范围的大小
    前端通过xlsx插件导入excel
    H5和安卓原生进行交互的操作流程记录
    javascript中字符串和数字之间互相转换的方法总结
    gitlab代码合并到主分支
    typeof和valueof、instance of 之间的区别
    javascript中map会改变原始的数组吗
    使用typescript来写react遇到的一些问题
    使用javascript进行时间数据格式的转换
    在vue的移动端项目中使用vue-echarts
  • 原文地址:https://www.cnblogs.com/xiandong/p/7608999.html
Copyright © 2011-2022 走看看