zoukankan      html  css  js  c++  java
  • 利用ul li 标签实现table表格的效果 (li内容超出ul设定的宽度时不换行)

    今天在项目中要实现动态的生成一行按钮,并且这行按钮不要换行。
    查看了很多的知识,最终用ul li解决了问题。
    贴出来大家学习:
    ul{white-space:nowrap; overflow:auto; height:100px; 200px;}
    li{display:inline-table; border: solid 1px black; height:80%;}
    <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    </ul>
    这段代码中起主要作用的是: ul:  white-space:nowrap;  以及  li: display:inline-table; (也可以使用:display:inline; 或者display:inline-block;)
    inline: 此元素会被显示为内联元素,元素前后没有换行符。
    inline-table: 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    inline-block: 行内块元素。(CSS2.1 新增的值)
    相关知识引自:http://www.w3school.com.cn

      爱情是两个人的“饰”!!
    欢迎光临我的小店:http://shop36465575.taobao.com/


  • 相关阅读:
    常用jquery
    常用记录
    mysql proxy 读写分离
    Linux 学习笔记
    php 1116
    php 1115
    php 1110
    php 1109
    php 1108
    php 1105
  • 原文地址:https://www.cnblogs.com/lfzwenzhu/p/1553964.html
Copyright © 2011-2022 走看看