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中改数据、、、、

    最终效果:

  • 相关阅读:
    httpclient在获取response的entity时报异常
    SpringCloud项目,接口调用返回http 500
    使用maven插件生成grpc所需要的Java代码
    win10 无法修改默认程序 默认打开方式的解决方法
    mock.js中新增测试接口无效,返回404
    echarts的pie图中,各区块颜色的调整
    HashMap源码注释翻译
    netty学习记录2
    netty学习记录1
    Java-JNA使用心得2
  • 原文地址:https://www.cnblogs.com/xiandong/p/7608999.html
Copyright © 2011-2022 走看看