html 列表内边距不对称_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:15 PM

我建立了一个列表然后左浮动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 下就可以了

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

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

aaa

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

aaa

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

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

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

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

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

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract