精华内容
下载资源
问答
  • 1.用父盒子宽度除以li的个数 2.用text-align设置文本居中

    1.用父盒子宽度除以li的个数
    2.用text-align设置文本居中

    展开全文
  • 第一种:使用float:left。http://jsfiddle.net/tounaobun/DE596/ 第二种:使用display:inline。http://jsfiddle.net/tounaobun/DE596/1/
  • <style> #subnav{width:960px;height:32px;} <style> 情况1 <div id="subnav">...#subnav 固定的宽是960px,它下面可能有 2个或者3个或者4 个li,如何用js或者jquery让li平分960的宽呢?
  • CSS怪异盒模型(li均分ul宽度)

    千次阅读 2019-09-18 17:39:02
    有一个 ul 下面有 5个 li ,前四个 li 右边有 20的边距。最后一个 li 没有边距。求均分? 效果图如下 : 方法如下: 方法一: <html> <head> <style type="text/css"> ul { width: ...

    有一个 ul 下面有 5个 li ,前四个 li 右边有 20的边距。最后一个 li 没有边距。求均分?

    效果图如下 :

     

    方法如下:

    方法一:    

    <html>
    
    <head>
        <style type="text/css">
            ul {
                width: 100%;
                height: 210px;
                display: flex;
            }
            
            li {
                width: 100%;
                height: 100%;
                list-style: none;
                width: calc((100%-80px)/5);
                margin-right: 20px;
            }
    
            li>div {
                width: 100%;
                height: 100%;
            }
    
            li:last-child {
                margin: 0;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
    </body>
    
    </html>

     

    方法二:    

    <html>
    
    <head>
        <style type="text/css">
            ul {
                width: 100%;
                height: 210px;
                background: orange;
                display: flex
            }
    
            li {
                width: 100%;
                height: 100%;
                list-style: none;
                width: calc(100%/5);
                margin-right: 20px;
                box-sizing: border-box;
    
            }
    
            li>div {
                width: 100%;
                height: 100%;
                background: red;
            }
    
            li:nth-last-child(1) {
                margin-right: 0;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
    </body>
    
    </html>
    
       

     

    方法三:    

    <html>
    
    <head>
        <style type="text/css">
            #drap {
                width: 100%;
                height: 200px;
                /* float: right; */
                display: flex;
            }
    
            .big {
                width: calc((100%-80) / 5);
                height: 200px;
                background-color: aqua;
            }
    
            .small {
                width: 20px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div id="drap">
          <div class="big"></div>
          <div class="small"></div>
          <div class="big"></div>
          <div class="small"></div>
          <div class="big"></div>
          <div class="small"></div>
          <div class="big"></div>
          <div class="small"></div>
          <div class="big"></div>
        </div>
    </body>
    
    </html>
    
       

     

    展开全文
  • 父元素 添加样式display: table;子元素添加样式display: table-cell;text-align: center;

    父元素 添加样式

    display: table;

    子元素添加样式

    display: table-cell;
    text-align: center;

    展开全文
  • I don`t understand why I have margin from the left: CSS: html, body { font-family:Myriad Pro, sans-... in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?

    I don`t understand why I have margin from the left:

    e0l5Y.png

    CSS:

    html, body {

    font-family:Myriad Pro, sans-serif;

    font-size:18px;

    color:#000;

    margin:0px;

    padding:0px;

    background: url('./images/background.png');

    }

    #container {

    width:890px;

    height:530px;

    margin:36px auto;

    }

    #userList {

    width:228px;

    height:355px;

    float:right;

    border:1px solid #cccccc;

    }

    .users li {

    list-style-type:none;

    background-color: #f2f2f2;

    width:100%;

    height:50px;

    border-bottom: 1px solid #cccccc;

    }

    HTML:

    • none.pngPiet van Meerdijk
    • none.pngHenk v/d Wal

    When I put margin-left:-40px; in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?

    展开全文
  • CSS 横向n等分

    2021-06-15 01:59:51
    在一个父div内平均放置n个子div,子div充满父级,不换行.复制代码1.已知n的个数,直接设置子宽度等于父的1/n略2.table表格需要在外层再套个div(grandfather).最好是两个以上的children.父级设置为行,children设置为行内...
  • CSS导航技术--间隔平分栏目,防止li换行
  • ul中每个li的宽度

    2017-01-19 13:38:00
    $('.xt_list li').width((608/$('.tp_list ul li').size())+'px'); 转载于:https://www.cnblogs.com/ghfjj/p/6306264.html
  • 我用的方法是添加几个空的的 li 在最后面。空 li 的数量按照你的页面排版来给,然后减少一个li。例如,我的页面排版,一行放四个 li ,那我的空 li 就给三个。因为给多了也看不出效果,够用就好。你可以放多几个也行...
  • 平分div

    2019-09-23 18:55:08
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .wrapper { width: 100%; /* 也可以固定宽度 */...
  • ul{ float:left; width:auto; min-width:113px;}  li{width:auto; white-space:nowrap;}
  • 移动端平分布局延伸

    2016-08-21 09:05:00
    flex方法 1、插入四个空标签,设置flex:1,这个答案是最多的(该方法适合用到多个布局,但代码有点臃肿,看个人喜好,有需要可以用) <ul class="share-list">...li class="gap"></li> ...
  • padding:0 } article,aside,footer,header,nav,main,section,summary,details,hgroup,figure,figcaption { display:block } li li { font-size:1em } ul,ol { margin:1em 0 1em 1.11111em } ul ul,ul ol,...
  • win10 安装framework3&period;5win+x 点击命令提示符(个管理员) 输入dism.exe /online /enable-feature /featurename:NetFX3 /Source:H:\sources\sxs(解压 ...GDB-Dashboard-GDB可视化界面项目地址 ...
  • 在制作网站时,很多分页都是采用li的显示为内嵌,但这样不利于定义背景,所以最好的办法是让li显示为块加浮动去解决,但这里有个问题,因为分页是不固定的,而又要让其始终居中,ul的宽度就无法去固定,所以按平时...
  • layui栅格如何实现5等分或者7等分

    千次阅读 2018-10-24 20:03:43
    layui 栅格系统是12格的; 不能实现5等分 不存在的  打开laui css查看源码    ...发现一等分是8.3% layui是12格的;...所以 实现五等分 12/5*8.3% 就是19.9999992% ...然后覆盖样式 实现五等分...
  • 那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分。 解决办法: 给div里边加了一个a,判断当滚动条滚动到一个程度就 给ul为 position:fixed,a标签就设置绝对定位向下移动比 ul高度有一点的 距离就可以了。 ...
  • div class="nav-li">11</div> <div class="nav-li">22</div> <div class="nav-li">33</div> </div> Css: .nav{ display:inline-block; /* Firefox */ display:-moz-...
  • 在项目中遇到ul中的li数量不定,但是还要给ul设置圆角和阴影,而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性 ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; ...
  • ul的宽度根据li的宽度自适应

    千次阅读 2019-09-04 09:01:03
    在项目中遇到ul中的li数量不定,但是还要给ul设置圆角和阴影,而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性 ul{ width: -moz-fit-content; width: fit-content; } 如果对浏览器要求不高,这种...
  • CSS 三列平分

    千次阅读 2016-07-17 17:41:58
    li { width : 386.66 px ; height : 200 px ; margin-right : 20 px ; background : red ; float : left ; line-height : 200 px ; text-align : center ; font-size : 100 px ; ...
  • <div class="nav">...div class="nav-li">成就</div> <div class="nav-li">动态</div> <div class="nav-li">收藏</div> </div> Css: .nav{ display:...
  • flex平分布局

    万次阅读 2018-05-28 15:51:04
    &amp;lt;ul class=&quot;flex&quot;&amp;gt; &amp;lt;li class=&quot;flex_item&quot;&amp;gt;&amp;lt;a href=&quot;&quot;&.../li&...li class=&a
  • 以下例子基于分四栏+栏间有间距的例子分析 效果图: html代码:  <div class="buy-one-buy"> <h3>淘一淘<...li><img src="../img/homePage/rotation-1.jpg" alt="First b...
  • TS平分

    千次阅读 2020-12-28 21:14:53
     r2 V4 Ob=H+M N=H+F+M+C ets=(H-Fo*Ob/N)/(H+F+M-Fo*Ob/N) return 气象 数值 模式 气 象数值 模式 数值模 式 气象 模式 海 洋模式 气候模 式 ,WRF MM5,Grapes,HY COM,LI COM, 同 化 集 合预报 模式联 盟 模式 ...
  • flex平分测试

    2016-04-18 14:28:00
    ul.testParent li { padding : 20px ; border : 1px #000000 solid ; width : 100% ; -moz-box-flex : 1 ; -webkit-box-flex : 1 ; } style > head > < body > < ul class =...
  • 元素两边对齐中间元素平分间距

    千次阅读 2017-03-30 14:43:34
    两边固定中间元素平分 *{margin: 0;padding: 0;} ul{width: 460px;margin:0 auto;border: 1px solid red;height: 110px;position: relative;top: -10px;} li{width: 98px;margin: 10px;border: 1px solid black;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,512
精华内容 604
关键字:

li平分