zoukankan      html  css  js  c++  java
  • css li 不换行(布局,内容)

    参考这里

    ------

    不换行的策略:

    不换行原理:

    ul 和 li 默认都是 display:block; 的标签,

    可以通过2种方式实现 li 的 不换行显示:

    * 将 li 设为 display:inline; ,然后通过 marging 和 padding 设置 li 的间距,
    
    * 将 li 设为 float:left; ,然后通过 ( margin & padding ) 设置 li 的间距,通过 width 设置 li 宽度,可以指定 overflow:hidden 以防止内容过多撑开 li ,

    ul 的设置:

    ul 最好设置 margin & padding = 0,且 list-style 设置为 none,以不显示前面的符号,

    例子:

    .ul_one {list-style: none;margin: 0px;padding: 0px;}s

     完整案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        /* li 不换行,宽度根据内容自适应,通过 float 实现 */
        .ul_one {list-style: none;margin: 0px;padding: 0px;}
        .ul_one li {float: left;background-color: #ccd;margin: 0px 20px 10px 0px;}
        
        /* li 不换行,宽度固定 */
        .ul_two {list-style: none;margin: 0px;padding: 0px;}
        .ul_two li {float: left;width: 100px;margin: 0px 20px 10px 0px;background-color: #ccd;overflow: hidden; line-height:1.6em;}
        
        /* li 不换行,宽度根据内容自适应,通过 display:inline 实现 */
        .ul_three {list-style: none;margin: 0px;padding: 0px;}
        .ul_three li {display:inline;background-color: #ccd;margin: 0px 20px 10px 0px;}
        
        .clear {clear: both;}
    </style>
    </head>
    <body>
        <ul class="ul_one">
            <li>1ssssssssssssssssssssssss</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
        </ul>
        <div class="clear"></div>
        <hr />
        <ul class="ul_two">
            <li>1ssssssssssssssssssssssss</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
        </ul>
        <div class="clear"></div>
        <hr />
        <ul class="ul_three">
            <li>1ssssssssssssssssssssssss</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
            <li>1ssssssssssssssssssssssss</li>
        </ul>
    </body>
    </html>
  • 相关阅读:
    python爬取斗图网中的 “最新套图”和“最新表情”
    SpringBoot (1) idea下的环境搭建及demo
    python爬取视频网站m3u8视频,下载.ts后缀文件,合并成整视频
    微信小程序—day05
    从零起步做到Linux运维经理, 你必须管好的23个细节
    前后端分离原理
    图文并茂|为你揭开微服务架构的“神秘面纱”!
    swarm集群日常部分操作
    OpenStack 部署运维实战
    京东618:Docker扛大旗,弹性伸缩成重点 (2015-06-23)
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/5165224.html
Copyright © 2011-2022 走看看