html 列表 内边距不对称_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:15:46
原創
1316 人瀏覽過

我建立了一个 列表 然后左浮动LI  我把列表的外边距和内边距  以及LI 的内外边距都设成0PX了 但是呢   LI 里面的文字 在垂直方向 现实的不对称  也就是上内边距很小 有1PX左右吧  下内边距却有3PX 这么大   看上去很别扭  边距都清零了没有用啊  这么解决呢 ?、各位帮帮忙


回复讨论(解决方案)

可以去年看看css兼容方面和hack相关的文章就可以找到答案了。

前面style加  * {margin:0;padding:0} 了吗?

我列表和列表元素全设置成 内外边距为0了   设置全局的也没用啊

我按照楼主的所说的写了个,没有遇到类似的问题啊,你是不是在列表里面又嵌套了标签了啊,如果真像楼主所说的这种现象,你可以在li里面设置定位,如:

          li{                position: relative;                top: 2px;            }
登入後複製

我给楼主整理了下,希望能帮到楼主!
<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>test</title>        <style>            .mainContent{                position: absolute;                top: 10px;                left: 300px;                width: 245px;                height: 200px;            }            ul{                padding: 0;                margin: 0;                float: left;            }            li{                float: left;                list-style: none;                margin-left: 2px;                cursor: pointer;                border: 1px solid red;                /*如果还遇到楼主所说的可以用以下的试试*/                /*position: relative;*/                /*top: 2px;*/            }            li:hover{                background-color: blue;            }         </style>    </head>    <body>        <div class="mainContent">            <ul>                <li>首页</li>                <li>用户管理</li>                <li>角色管理</li>            </ul>        </div>    </body></html>
登入後複製

你的li太高了
有三种方法,把li调低点或把字体调大点或设line-height等于li的高度

你的li太高了
有三种方法,把li调低点或把字体调大点或设line-height等于li的高度
li 的高度 跟 line-height 高度同高

没有贴代码出来呀~~~~

这个问题嘛...我经常出现. 解决也非常容易. 会用positon :relative; 这个不 ,然后 top :0px; left :0px ; 上面的top left 中的0px ,是根据你自己要的的位置自己定义的。而且这个position是在任何浏览器兼容的 . 至于你上说的li 里面float  这个别的浏览器出现兼容问题。也就是说出现错位的情况 。那怎么解决就用 css hack 下就可以了

这个问题嘛...我经常出现. 解决也非常容易. 会用positon :relative; 这个不 ,然后 top :0px; left :0px ; 上面的top left 中的0px ,是根据你自己要的的位置自己定义的。而且这个position是在任何浏览器兼容的 . 至于你上说的li 里面float  这个别的浏览器出现兼容问题。也就是说出现错位的情况 。那怎么解决就用 css hack 下就可以了

这个问题嘛...我经常出现. 解决也非常容易. 会用positon :relative; 这个不 ,然后 top :0px; left :0px ; 上面的top left 中的0px ,是根据你自己要的的位置自己定义的。而且这个position是在任何浏览器兼容的 . 至于你上说的li 里面float  这个别的浏览器出现兼容问题。也就是说出现错位的情况 。那怎么解决就用 css hack 下就可以了

其实大家说的 我知道  但是相对定位 定位的事LI 的位置   我说的是 在LI里面的字相对于LI 这个框的上下位置不对称 而并非 LI的位置不对称    就是LI 里面的字  可能是浏览器兼容的问题吧  我看百度什么的大网站 也有这种情况 

哦,我知道了你说什么了...我随便举个例子

  • aaa

  • 你是说aaa的位置调不好是吧
    这样  
  • aaa


  • 再  .zi{
    position :relative;
    left://多少px
    top://多少px
    }
    这样可以懂了...

    楼上的方法 似乎可以 但是 导致这样的原因究竟是什么呢  我看一些大的网站上面 你全选页面的文字 也会发现有这样的现象  怎么回事呢  

    position :relative; 我以前也遇到过,是这个position :relative;原因。

    虽然得到分了...但是还是和你说下 原因...

    不是position 的原因知道不...

    是float 这个词的原因,在火狐和 谷歌里面 float的时候不会怎么变化...在ie中 float时候出现了错位..就是你说的这情况

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板