Home > Web Front-end > HTML Tutorial > Li alignment problem._html/css_WEB-ITnose

Li alignment problem._html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:58:31
Original
1285 people have browsed it

.Wfbotmain{min-width:1200px;color:#666666;font-size:12px;padding-top:20px;background:#F9F9F9;margin:0px auto; text-align:center;}
.Wfbotmain ul{  line-height:18px;height:110px;padding:0 20px 25px 25px; float:left; }
.Wfbotmain ul a,#foot_text a{color:#666666;}
.Wfbotli{border-right:1px dashed #ddd;}
.Wfbotli li { float:left;}
.WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
.color99{padding-left:3px;}
   
        @* *@
         
         @ADDS_Lan.S_ADDS_Footer_CustomerServices
        

  • @ADDS_Lan.S_ADDS_Footer_UserJY
  •  
                
                @ADDS_Lan.S_ADDS_Footer_Follow
                
  • @ADDS_Lan.S_ADDS_Footer_MicroletterAttention

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Platform

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Business

  •               
                @ADDS_Lan.S_ADDS_Footer_AdvertisingSer
                
  • @ADDS_Lan.S_ADDS_Footer_Pricesystem

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Advertising

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Servicesguarantee
  •    
                 
               
                @ADDS_Lan.S_ADDS_Footer_UseTheHelp
                
  • @ADDS_Lan.S_ADDS_Footer_RegistrationandLogin

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Retrieval
  •  
                    
  • @ADDS_Lan.S_ADDS_Footer_DownloadandView

  •             
                @ADDS_Lan.S_ADDS_Footer_Contact
                
  • @ADDS_Lan.S_ADDS_Footer_Email service@botudata.com.cn

  •                 
  • .@ADDS_Lan.S_ADDS_Footer_TelPhone 0731-8411-8472

  •                 
  • .8:30-11:30,13:30-17:30(@ADDS_Lan.S_ADDS_Footer_WorkDay)

  •             
                
      @ADDS_Lan.BI_AS_Language
                  
    • English

    •                 
    •   .Chinese

    •             



    在360,谷歌,火狐都能对齐,在IE下第一个LI没对齐. 

      


    回复讨论(解决方案)

    自己代码 有问题 



    自己代码 有问题 

       我在span前加个li  也还是一样.  

    发完整的上来  
    代码本身存在很多问题   

    发完整的上来  
    代码本身存在很多问题   



    .WfBottom{min-width:1200px;background:#F9F9F9;border-top:1px solid #E9E9E9; margin:0px auto; text-align:center;}
    .Wfbotmain{min-width:1200px;color:#666666;font-size:12px;padding-top:20px;background:#F9F9F9;margin:0px auto; text-align:center;}
    .Wfbotmain ul{  line-height:18px;height:110px;padding:0 20px 25px 25px; float:left; }
    .Wfbotmain ul a,#foot_text a{color:#666666;}
    .Wfbotli{border-right:1px dashed #ddd;}
    .Wfbotli li { float:left;}
    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
    .color99{padding-left:3px;}
       
            @* *@
             
            
  • @ADDS_Lan.S_ADDS_Footer_CustomerServices

  •         
  • @ADDS_Lan.S_ADDS_Footer_UserJY
  •  
                
                @ADDS_Lan.S_ADDS_Footer_Follow
                
  • @ADDS_Lan.S_ADDS_Footer_MicroletterAttention

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Platform

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Business

  •               
                @ADDS_Lan.S_ADDS_Footer_AdvertisingSer
                
  • @ADDS_Lan.S_ADDS_Footer_Pricesystem

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Advertising

  •                 
  • @ADDS_Lan.S_ADDS_Footer_Servicesguarantee
  •    
                 
               
                
                
      @ADDS_Lan.S_ADDS_Footer_Contact

                  
    • @ADDS_Lan.S_ADDS_Footer_Email service@botudata.com.cn


    •                 
    • @ADDS_Lan.S_ADDS_Footer_TelPhone 0731-8411-8472


    •                 
    • 8:30-11:30,13:30-17:30(@ADDS_Lan.S_ADDS_Footer_WorkDay)

    •             

                
      @ADDS_Lan.BI_AS_Language

                  
    • English


    •                 
    • Chinese

    •             
     
     

    Can you remove all your
    first
    Add

  • to all the spans in your ul first;
    Don’t send the razor view code to the browser The source code

    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
    can be removed directly. Since you are adding float per line, why are you adding float?

    Can you remove all your
    first?
    Add

  • to all the spans in your ul.
    Don’t post the razor view. Code Send the source code of the browser

    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
    You can remove it directly. Since you are adding float per line, why are you adding float?

     
    .WfBottom{min-width:1200px;background:#F9F9F9;border-top:1px solid #E9E9E9; margin:0px auto; text-align:center;}
    .Wfbotmain{min-width:1200px;color:#666666;font-size:12px;padding-top:20px;background:#F9F9F9;margin:0px auto; text-align:center;}
    .Wfbotmain ul{  line-height:18px;height:110px;padding:0 20px 25px 25px; float:left; }
    .Wfbotmain ul a,#foot_text a{color:#666666;}
    .Wfbotli{border-right:1px dashed #ddd;}
    .Wfbotli li { float:left;}
    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
    .color99{padding-left:3px;}
       
            
             
            
  • 客户服务

  •         
  • .用户建议
  •  
                
                关注我们
                
  • 微信关注

  •                 
  • 平台百科

  •                 
  • 业务合作

  •               
                广告服务
                
  • 价格体系

  •                 
  • 广告申请

  •                 
  • 服务保障
  •    
                 
               
                使用帮助
                                                                                                                                                                                                               
  • Registration and Login


  •                                          ="color99">. Search for documents

                                         Download and View
    span class="WfbotliSpan">Contact information

                                                  Email service@botudata.com.cn

    color99">. Customer service phone number 0731-8411-8472

                                                  8:30-11:30,13:30-17:30 (working days)
    WfbotliSpan">Language

                                                   English

                                                                                        Chinese
    🎜>

    Can you remove all your
    first? Add
  • to all the spans in your ul first.

    Don’t send the code of the razor view. Send it to the browser. The source code of the device


    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block; float:left;}
    can be removed directly. Since you are adding float per line, why are you adding float?
    br is used to force a line break.

    li It comes from a line break itself, no need br

    li It comes from a line break itself, no need br

    ....can Can you add QQ to chat? It still doesn’t work.

    Send the html source code of your browser

    [/code]

    [code=html]<style type="text/css">        .WfBottom        {            min-width: 1200px;            background: #F9F9F9;            border-top: 1px solid #E9E9E9;            margin: 0px auto;            text-align: center;        }        .Wfbotmain        {            min-width: 1200px;            color: #666666;            font-size: 12px;            padding-top: 20px;            background: #F9F9F9;            margin: 0px auto;            text-align: center;        }        .Wfbotmain ul        {            line-height: 18px;            height: 110px;            padding: 0 20px 25px 25px;			width:60px;			overflow:hidden;            float: left;        }        .Wfbotmain ul a, #foot_text a        {            color: #666666;        }        .Wfbotli        {            border-right: 1px dashed #ddd;        }        .Wfbotli li        {                    }          .color99        {            padding-left: 3px;        }    </style>    <div class="Wfbotmain" style="padding-left: 400px">        <ul class="Wfbotli" id="fulleft">            <li><span class="WfbotliSpan"><b>@ADDS_Lan.S_ADDS_Footer_CustomerServices</b></span></li>            <li><span class="color99">.</span><a href="" target="_blank">@ADDS_Lan.S_ADDS_Footer_UserJY</a></li>        </ul>        <ul class="Wfbotli">            <li><span class="WfbotliSpan"><b>@ADDS_Lan.S_ADDS_Footer_Follow</b></span></li>            <li><span class="color99">.</span><a href="" target="_blank">@ADDS_Lan.S_ADDS_Footer_MicroletterAttention</a></li>            <li><span class="color99">.</span><a href="../About" target="_blank">@ADDS_Lan.S_ADDS_Footer_Platform</a></li>            <li><span class="color99">.</span><a target="_blank" href="">@ADDS_Lan.S_ADDS_Footer_Business</a></li>        </ul>        <ul class="Wfbotli">                    <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Pricesystem</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Advertising</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Servicesguarantee</a></li>        </ul>        <ul class="Wfbotli">                   <li><span class="color99">.</span><a href="../CustomManager/CustomManagerLogin">@ADDS_Lan.S_ADDS_Footer_RegistrationandLogin</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Retrieval</a></li>                       <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_DownloadandView</a></li>        </ul>        <ul class="Wfbotli">                       <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Email service@botudata.com.cn</a></li>            <li><span class="color99">.</span>@ADDS_Lan.S_ADDS_Footer_TelPhone 0731-8411-8472</li><br />            <li><span class="color99">.</span>8:30-11:30,13:30-17:30(@ADDS_Lan.S_ADDS_Footer_WorkDay)</li>        </ul>        <ul>                       <li><span class="color99">.</span><a href="" onclick="ChangeCulture('English')" id="zh-EN"                name="multiLanguageSwitch">English</a></li>            <li><span class="color99">  .</span><a href="" onclick="ChangeCulture('Chinese')"                id="zh-CN">Chinese</a></li>        </ul>    </div>
    Copy after login
    Copy after login

    Send the html source code of your browser

    变这样了 ..



    源文件
     
    .WfBottom{min-width:1200px;background:#F9F9F9;border-top:1px solid #E9E9E9; margin:0px auto; text-align:center;}
    .Wfbotmain{min-width:1200px;color:#666666;font-size:12px;padding-top:20px;background:#F9F9F9;margin:0px auto; text-align:center;}
    .Wfbotmain ul{  line-height:18px;height:110px;padding:0 20px 25px 25px;  }
    .Wfbotmain ul a,#foot_text a{color:#666666;}
    .Wfbotli{border-right:1px dashed #ddd;}
    .Wfbotli li { text-align:left;}
    .WfbotliSpan{padding:0 0 13px 15px;display:inline-block;}
    .color99{padding-left:3px;}
       
            
            
            
  • 客户服务

  •         
  • 用户建议
  •  
                
                
  • 关注我们

  •             
  • 微信关注

  •                 
  • 平台百科

  •                 
  • 业务合作

  •               
                
  • 广告服务

  •             
  • 价格体系

  •                 
  • 广告申请

  •                 
  • 服务保障
  •    
                 
               
                
  • 使用帮助

  •                                                                                                                                                                                                            
  • Registration and Login

  •                                         . Search for documents
    Download and View
    li>Contact informationEmail service@botudata.com.cn
                                          Customer service phone number 0731-8411-8472
                                             8:30-11:30,13:30-17:30 (working days)
    span class="WfbotliSpan">Language
        
  • . English

  •                        ;li>Chinese
    🎜>




    [/code]

    Is this okay for you?

    [code=html]<style type="text/css">        .WfBottom        {            min-width: 1200px;            background: #F9F9F9;            border-top: 1px solid #E9E9E9;            margin: 0px auto;            text-align: center;        }        .Wfbotmain        {            min-width: 1200px;            color: #666666;            font-size: 12px;            padding-top: 20px;            background: #F9F9F9;            margin: 0px auto;            text-align: center;        }        .Wfbotmain ul        {            line-height: 18px;            height: 110px;            padding: 0 20px 25px 25px;			width:60px;			overflow:hidden;            float: left;        }        .Wfbotmain ul a, #foot_text a        {            color: #666666;        }        .Wfbotli        {            border-right: 1px dashed #ddd;        }        .Wfbotli li        {                    }          .color99        {            padding-left: 3px;        }    </style>    <div class="Wfbotmain" style="padding-left: 400px">        <ul class="Wfbotli" id="fulleft">            <li><span class="WfbotliSpan"><b>@ADDS_Lan.S_ADDS_Footer_CustomerServices</b></span></li>            <li><span class="color99">.</span><a href="" target="_blank">@ADDS_Lan.S_ADDS_Footer_UserJY</a></li>        </ul>        <ul class="Wfbotli">            <li><span class="WfbotliSpan"><b>@ADDS_Lan.S_ADDS_Footer_Follow</b></span></li>            <li><span class="color99">.</span><a href="" target="_blank">@ADDS_Lan.S_ADDS_Footer_MicroletterAttention</a></li>            <li><span class="color99">.</span><a href="../About" target="_blank">@ADDS_Lan.S_ADDS_Footer_Platform</a></li>            <li><span class="color99">.</span><a target="_blank" href="">@ADDS_Lan.S_ADDS_Footer_Business</a></li>        </ul>        <ul class="Wfbotli">                    <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Pricesystem</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Advertising</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Servicesguarantee</a></li>        </ul>        <ul class="Wfbotli">                   <li><span class="color99">.</span><a href="../CustomManager/CustomManagerLogin">@ADDS_Lan.S_ADDS_Footer_RegistrationandLogin</a></li>            <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Retrieval</a></li>                       <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_DownloadandView</a></li>        </ul>        <ul class="Wfbotli">                       <li><span class="color99">.</span><a href="">@ADDS_Lan.S_ADDS_Footer_Email service@botudata.com.cn</a></li>            <li><span class="color99">.</span>@ADDS_Lan.S_ADDS_Footer_TelPhone 0731-8411-8472</li><br />            <li><span class="color99">.</span>8:30-11:30,13:30-17:30(@ADDS_Lan.S_ADDS_Footer_WorkDay)</li>        </ul>        <ul>                       <li><span class="color99">.</span><a href="" onclick="ChangeCulture('English')" id="zh-EN"                name="multiLanguageSwitch">English</a></li>            <li><span class="color99">  .</span><a href="" onclick="ChangeCulture('Chinese')"                id="zh-CN">Chinese</a></li>        </ul>    </div>
    Copy after login
    Copy after login
    The float of ul cannot be removed
    I added the float of ul. But there is a problem with the style under Google. Both IE and 360 are fine.

    What’s the problem with Google? Send me a picture to see.

    What’s the problem with Google? Send me a picture to see.


    Is there any problem with this? Do you want to be centered or to the left or something?

    Is there any problem with this? Do you want to be centered or to the left or something?

    It’s nothing.... It’s easy to solve it yourself. . This kind of problem. Thank you so much! ! !
    Related labels:
    source:php.cn
    Previous article:How to adapt select width according to text length_html/css_WEB-ITnose Next article:[Transfer] CSS3 Media Query implements responsive layout_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template