當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html ul左侧浮动,UL里的LI元素左浮动层一行显示时使其居中的方法

發布時間：2023/12/2 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 html ul左侧浮动,UL里的LI元素左浮动层一行显示时使其居中的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在制作頁面是，li浮動是很常用的，一般情況也不用其居中，但有時，其特殊原因需要居中，這是就有點犯難了，這里有了一個很好的解決方法，主要是用了相對定位的原理。

在ul外報一層，使其相對定位，再ul相對定位，距左50%，li相對定位，距右50%就實現了li左浮動后海居中顯示。

復制代碼代碼如下:

無標題文檔

div, ul, li {

margin: 0;

padding: 0;

border: 0;

}

body {

font: 12px/1.6em 宋體 sans-serif;

color: #585858;

text-align: center;

}

.div1 {

position:relative;

width: 948px;

height: 100px;

margin: 20px auto 0 auto;

background-color: #F9F9F9;

border: solid 1px #D4D4D4;

}

.div1 ul {

position: relative;

left: 50%;

float: left;

}

.div1 li {

position: relative;

right: 50%;

display: inline;

float: left;

margin-left: 10px;

line-height: 38px;

}

以上是生活随笔為你收集整理的html ul左侧浮动,UL里的LI元素左浮动层一行显示时使其居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。