精华内容
下载资源
问答
  • <style> #subnav{width:960px;height:32px;} <style> 情况1 <div id="subnav">...#subnav 固定的宽是960px,它下面可能有 2个或者3个或者4 个li,如何用js或者jquery让li平分960的宽呢?
  • 1.用父盒子宽度除以li的个数 2.用text-align设置文本居中

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

    展开全文
  • CSS导航技术--间隔平分栏目,防止li换行
    
    

     

    注意了这里的技术可能并不适用所有的CSS导航。这是关于如何分隔或者平分导航中每个栏目的技术。这种技法是我在设计CSS导航中想出来的一个CSS技法,它在我的CSS导航设计中也是经常使用的一种。如果要增加导航的栏目,也只需要更改一个数值,不需要修改太多的CSS,甚至重做图片,但可能有某些方面的缺点。在使用前不妨先考虑下是否有更好的解决方案。

    这里先假设例子的所有的导航都使用以下的html结构,这是目前地球上最简洁的导航了。

    CODE:
    <div class="nav">
    <ul>
    <li><a href="#">home page</a></li>
    <li><a href="#">new products</a></li>
    <li><a href="#">specials</a></li>
    <li><a href="#">my account</a></li>
    <li><a href="#">contact us</a></li>
    </ul>
    </div>   
    原理:
    1,给外层的div一个和其他内容相同的宽度来达到对齐的效果,overflow:hidden来隐藏超出的部分和清理浮动。
    2,因为很多情况下li都是float的,这里需要给div.nav ul足够的宽度来防止li换行。
    3,给每个li定义的个图片或border,然后需要隐藏第一的li的图片或border。用负值的margin来实现。
    4,a必须display:block;把主要的修饰放在a上实现。

    1,分隔导航中每个栏目
    使用图片或者定义border把栏目分开。
    这种情况只是这种技法的初级应用。代码很简单不需要太多解释。

    CODE:
    /*实现下面的导航效果,代码是从之前作某个具体的案例中抽取出来的*/
    .nav {
        background: #eeff00;
        height: 3em;
        line-height: 3em;
    /*居中。width的定义是必须的*/
        width: 732px;
        margin: auto;
    /*Clear Float同时隐藏不需要的部分,达到与其他内容对齐 */
        overflow: hidden;
    }
    .nav ul {
    /*这是关键,提供较大的宽,避免li出现换行*/
        width: 1000px;
    }
    .nav li {
        float: left;
    /*因为需要定义margin-left,要避免IE6以下的双倍margin*/
        display: inline;
    /*这是隐藏第一个li的图片或者border-left的关键,这里10px是图片的宽。当然用first-child同样可以取消图片或者border,但是IE6下不支持这种

    方式*/
        margin-left: -10px;
    /*给padding-left足够的空间放置图片或者是border-left,如果栏目(li)增加,则减小padding的值。这里每个li的宽度是不一样的,如果要使每

    个li的宽度是不一样的,可以定义width值和text-align:center.这时可以不需要定义padding*/
        padding: 0 50px;
        background: url(images/t_bullet1.gif) no-repeat left center;
    }
    .nav a {
        display: block;
        float: left;
        text-transform: uppercase;
    /*IE6在显示字号110%有点问题*/
        font-size: 110%;
        -font-size: 14px;
    }
    2,分隔导航中每个栏目,并且每个栏目有间隔
    算上彼此的间隔之后,准确的平分每个li是不可能的,我们只能在视觉上创造出平分,1-2px的误差在只有在彼此相邻的对比下才会发现。
    现在来实现上面的效果。以下是CSS,html还是保持不变的。

    CODE:
    /*这个例子比较特殊,我并没有为每个li定义margin来实现彼此的间隔,代码还是大同小异的。
    .nav定义了一个渐变的黑色背景,width使他和上下的内容已经对齐,事先在他的上一级我已经居中了,如果需要居中则加入margin:auto;
    .nav是960px,目前有5li,如果没有彼此的间隔正好平分,这种情况要非常幸运才碰得上。
    现在彼此的间隔是2px,我的数学不好,这个不知道怎么算。但至少知道这是不能平分。
    有强人竟然给px小数的数值!我从不会那么勤奋到给每个li定义Width的。
    */
    .nav {
        width: 960px;
        height: 40px;
        margin-bottom: 2px;
        overflow: hidden;
        background: #000 url(images/t_navBg.gif) repeat-x;
    }
    /*可以注掉这个,再调整.nav li 的width,这会出现一点点数值就会让li换行,这是必须的*/
    .nav ul {
        width: 1000px;
    }
    .nav li {
        float: left;
        display: inline;
    /*因为border-left是2px,所以不用讲了,地球人都知道*/
        margin-left: -2px;
    /*190px不是量出来的,是个大概值,这个自己该写多少写多少,以后li增加了,li越多数值就改越小。*/
        width: 190px;
        height: 40px;
        line-height: 40px;
    /*如果用margin-right实现间隔,这样我要把背景图t_navBg.gif放在li上,如果li太少则达不到下图的这样效果(width: 120px;)。
    #F2F2ED正好是body背景的颜色,不是真正的间隔,是一种错觉。*/
        border-left: 2px solid #F2F2ED;
    }
    /*.nav li a的display: block;是必须的,其他如何定义那大家就各显神通了*/
    .nav li a {
        display: block;
        color: #fff;
        padding-left: 20px;
        text-decoration: none;
        outline: none;
        text-transform: capitalize;
        background: url(images/t_bullet_yellow.gif) no-repeat 10px 50%;
    }
    3,平分导航中每个栏目,彼此有间隔
    看到这种效果,绝对会有想放弃以CSS实现的念头,这用表格太简单了。这是事实。但一旦栏目的数量改变,又要重新作。
    要想个一劳永逸的方法。或许要要加hover的效果。
    IE6不支持A以外元素的hover伪类,注意是“不支持A以外元素的”,也就是说“以内的”就可以了。
    这样只好改一下原来的html了,在a以内加span。

    CODE:
    <div class="nav">
    <ul>
    <li><a href="#"><span>home page</span></a></li>
    <li><a href="#"><span>new products</span></a></li>
    <li><a href="#"><span>specials</a></span></li>
    <li><a href="#"><span>my account</span></a></li>
    <li><a href="#"><span>contact us</span></a></li>
    </ul>
    </div>   
    看看CSS吧

    CODE:
    /*假设.nav已经居中,需要居中则加入margin:auto; */
    .nav {
        height: 43px;
        line-height: 43px;
        margin-bottom: 5px;
        width: 900px;
        overflow: hidden;
    }
    .nav ul {
        width: 1000px;
    }
    .nav li {
        float: left;
    /*display: inline;这里可以不要了*/
        margin-right: 3px;
    }
    .nav a {
    /*display: block;是必须的*/
        display: block;
        text-transform: uppercase;
        font-size: 120%;
        text-align: center;
    /*你需要慢慢调整widt的数值,来达到最佳效果。最后的li可能要被隐藏1-2px,不仔细看的话是不易被发现*/
        width: 178px;   
        background: #FD1B77 url(images/navBgL.gif) no-repeat 0 0;
    }
    .nav a span {
    /*display: block;是必须的*/
        display: block;
        background: url(images/navBgR.gif) no-repeat 100% 0;
    }
    /*加入hover效果*/
    .nav a:hover {
        background-position: 0 100%;
    }
    .nav a:hover span {
        background-position: 100% 100%;
    }

    展开全文
  • 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
    <ul class="flex">
        <li class="flex_item"><a href=""></a></li>
        <li class="flex_item"><a href=""></a></li>
        <li class="flex_item"><a href=""></a></li>
        <li class="flex_item"><a href=""></a></li>
    </ul>
    
    /*ul*/  
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    
    /*li 平均分配*/  
    .flex .flex_item{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    

    更多 flex 布局传送门

    展开全文
  • <div class="nav">...div class="nav-li">成就</div> <div class="nav-li">动态</div> <div class="nav-li">收藏</div> </div> Css: .nav{ display:...
    <div class="nav">
    
      <div class="nav-li">成就</div>
    
      <div class="nav-li">动态</div>
    
      <div class="nav-li">收藏</div>
    
    </div>
    
    Css:
    
       .nav{
    
     
    
     display:inline-block;
    
        /* Firefox */
    
        display:-moz-box;
    
        -moz-box-orient:horizontal;
    
        /* Safari, Opera, and Chrome */
    
        display:-webkit-box;
    
        -webkit-box-orient:horizontal;
    
        /* W3C */
    
        display:box;
    
        box-orient:horizontal;
    
    }
    
    .nav-li{
    
    height: 40px;
    
    line-height: 40px;
    
    -webkit-box-flex: 1.0;
    
    -moz-box-flex:1.0;
    
     box-flex:1.0;
    
    }

    第二种平分一行

    /*ul*/  
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    
    /*li 平均分配*/  
    .flex .flex_item{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    

    不管添加多少行都是平分

    第一种换行平分

    .list{
        display: flex;
        flex-flow: row wrap;
    
    
    }
    .item{
        flex: 0 0 25%;
    }

    第二种换行平分

    .list{
    		display: flex;
            flex-wrap: wrap;
            justify-content: space-between; 
            text-align: center;
            position: relative;
            width: 750px;
    		border:1px solid red;
    	 }
    	.item{
    		border: 1px solid #CACACA;
            color: #888;
            font-size: 15px;
            width: 180px; 
    		margin-top:20px;
    		margin-bottom:20px; 
            text-align: center; 
    		align-items:center;
            
    	 }
    	 .item:not(:nth-child(3n)){
    		margin-right: 68px;
    	}
    	.list:after {
    		content: "";
    		flex: auto;
    	}

    html

    <div class="list">
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    		<div class="item">
    			全部
    		</div>
    	 </div>

     

    3。针对微信小程序画table

    .tr{
        display: flex;
    }
    .td{
        flex-shrink: 0;  
        width: 200rpx;
    }

    4、换行平分比如一行三个显示两行

                .product-list{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: start;
                    position: relative;
                    margin: 0 20rpx;
                    .product-item{
                        flex: 0 0 210rpx;
                        margin-left: 20rpx;
                        &:nth-child(3n+1){
                            margin-left: 0rpx; 
                        }
                        .img{
                            width: 210rpx;
                            height: 210rpx;
                        }
                    }
                }

     

    展开全文
  • 移动端平分布局延伸

    2016-08-21 09:05:00
    flex方法 1、插入四个空标签,设置flex:1,这个答案是最多的(该方法适合用到多个布局,但代码有点臃肿,看个人喜好,有需要可以用) <ul class="share-list">...li class="gap"></li> ...
  • 元素两边对齐中间元素平分间距

    千次阅读 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;...
  • 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-...
  • 我用的方法是添加几个空的的 li 在最后面。空 li 的数量按照你的页面排版来给,然后减少一个li。例如,我的页面排版,一行放四个 li ,那我的空 li 就给三个。因为给多了也看不出效果,够用就好。你可以放多几个也行...
  • 以下例子基于分四栏+栏间有间距的例子分析 效果图: html代码:  <div class="buy-one-buy"> <h3>淘一淘<...li><img src="../img/homePage/rotation-1.jpg" alt="First b...
  • 使用flex布局,如果是九宫格的话正好可以平分,如图 如果是我们只需要八块,如图 但是我们想让最后一块左对齐,依次排列,需要在元素的父级增加伪元素after,如图 <li></li> <li></li> <li></li> <li>...
  • display:flex;布局

    2021-03-22 10:45:57
    菜鸟教程display:flex;布局 例子原文 ...例二:水平横向平分 display: flex;(父元素) flex:1;(子元素等分空间) HTML代码: <ul> <li>音乐</li> <li>影视</li>
  • 使用calc()计算元素宽度

    千次阅读 2016-12-09 17:29:30
    1  2  3   4   1、容器宽度1200  前提: 每行4列 ... li的间距16px(最后一个li没有间距) ... li的宽度:calc(25% - 16*3/4) //25%是在没有间距的情况下平分,3个间距被4个li
  • 移动端页面制作2

    2014-12-03 11:28:00
    在说等分之前,先抛出一个问题,如下面的emmet代码,footer部分的导航有些页面是三个,有些页面是四个,我们要求的是不论是三个还是四个甚至于5个,都平分宽度。 footer.footer>ul.nav-links>li*3 footer....
  • 举个例子 //ul样式 width: 100%; display: grid; grid-template-columns: repeat(5, 1fr);//1fr 平分空间 grid-template-rows: repeat(4, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;...li img
  • jQuery Mobile 导航栏和布局

    千次阅读 2016-05-11 11:43:38
    导航栏 1.使用data-role=”navbar”属性来定义导航栏,导航栏最多放置5个按钮,否则会换行。 <!-- 五个按钮内,默认平分.如果有图标默认在文字正上方 --> <li><a href="#
  • 178、分数排名--leetcode

    2019-08-17 09:48:49
    题解:https://leetcode-cn.com/problems/rank-scores/solution/fen-shu-pai-ming-zhi-fen-shu-pai-ming-by-li-qiu-xi/ ...请注意,平分后的下一个名次应该是下一个连续的整数值。换句话说,名次之间不应该有“间隔...
  • 然而··········这样写的话并不会像第一张图片那样展示,第二排的三个数据会平分整个宽度,   思路:所有我采用的方法就是改变原始数据,添加占位容器即添加多余的li元素   我用的是vue,其他框架...
  • 算法(一):二分算法

    2020-05-08 18:04:28
    故二分算法应运而生,将数据平分为2,这样每次循环可以排除一半值(指数增长)。这就是最简单的二分算法。 2. 二分查找的应用 猜数字游戏: 在[0~100]区间中,主持人选一个数记住,其余人猜,每次猜,主持人只能...
  • 平分出现时,就是Manhanttan距离不变。最一开始的位置和最终位置之间的距离不变。2.要算的是next position 就是当前位置的下一个移动到的位置。要算next position 与goal position 就是最后结束位置的...
  • //diff为x,y轴被数据最大值和最小值的取值范围所平分的等份。 this.series.data.forEach(function(item, index) { var x = diffX * index, y = Math.floor(self.height - diffY * (item - dataMin)) ...
  • CAD快捷键文档

    2011-12-17 19:02:10
    ME,*MEASURE(等距平分) DIV,*DIVIDE(等份平分) V, *VIEW(命名视图) AA, *AREA(面积) DI, *DIST(距离) LI, *LIST(显示图形数据信息) Add,*从选择集中添加 Remove,*从选择集中取消 BO, *BOUNDARY(边界...
  • A第一个到来,他将鱼平分作5份,把多余的一条扔回湖中,拿走自己分好的一份回家去了;B第二个到来,也将鱼平分为5份,扔掉多余的一条,只拿走自己分好的一份;接着C、D、E依次到来,也按同样的方法分鱼。问这堆鱼...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

li平分