DIV+CSS樣式，li自動(dòng)適應(yīng)高度，自動(dòng)換行，橫向排列

HTML部分：

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出昌平免費(fèi)做網(wǎng)站回饋大家。

div id="nav"

ul

liAAAA/li

liBBBB/li

liCCCC/li

liDDDD/li

liEEEE/li

liFFFF/li

/ul

/div

css部分：

#nav{

margin: 0 auto;

border: 2px solid #00CED1;

}

ul,li {

margin: 0px;

padding: 0px;

list-style: none;

}

ul{

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

li{

border: 1px solid;

width: 100px; /*每個(gè)元素的初始化寬度*/

text-align: center;

margin-top: 10px;

margin-bottom: 10px;

flex:auto;? /*這是關(guān)鍵*/? ? ? ? ?

}

擴(kuò)展資料：

Flex是Flexible Box的縮寫，用來(lái)為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。

采用Flex布局的元素，被稱為Flex容器(flex container)，簡(jiǎn)稱“容器”。其所有子元素自動(dòng)成為容器成員，成為Flex項(xiàng)目(Flex item)，簡(jiǎn)稱“項(xiàng)目”。

容器默認(rèn)存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，默認(rèn)項(xiàng)目按主軸排列。

main start/main end：主軸開始位置/結(jié)束位置；

cross start/cross end：交叉軸開始位置/結(jié)束位置；

main size/cross size：?jiǎn)蝹€(gè)項(xiàng)目占據(jù)主軸/交叉軸的空間；

設(shè)置在容器上的屬性有6種。

flex-direction

flex-wrap

flex-flow

justify-content

align-item

align-content

一行顯示3個(gè)的CSS怎么寫？

1、利用Dreamweaver新建一個(gè)html頁(yè)面。

2、在body里面輸入代碼

ul

li你好/li

li小魚/li

li小小/li

/ul。

3、默認(rèn)的樣式是這樣的。

4、編輯li標(biāo)簽的css樣式。

5、float:left代表的是元素左對(duì)齊。這樣li標(biāo)簽就可以橫排顯示了，list-style:none用來(lái)去除li標(biāo)簽前面的小圓點(diǎn)。

css控制ul標(biāo)簽下li樣式

在ul標(biāo)簽下li的默認(rèn)樣式為一個(gè)實(shí)心圓（disc）? ?可忽略不寫

li樣式的改變是用 list-style:屬性值 來(lái)改變的

我們給li設(shè)置css，去除默認(rèn)樣式（實(shí)心圓）

將li的樣式設(shè)置為空心圓

將li的樣式設(shè)置為實(shí)心正方形

其他：

decimal ? : ?　CSS1　阿拉伯?dāng)?shù)字

lower-roman ? :? 　CSS1　小寫羅馬數(shù)字 ?

upper-roman ? :? 　CSS1　大寫羅馬數(shù)字 ?

lower-alpha ? :? 　CSS1　小寫英文字母 ?

upper-alpha ? :? 　CSS1　大寫英文字母??

armenian ? : ?　CSS2　傳統(tǒng)的亞美尼亞數(shù)字 ?

cjk-ideographic ? :? 　CSS2　淺白的表意數(shù)字 ?

georgian ? : ?　CSS2　傳統(tǒng)的喬治數(shù)字 ?

lower-greek ? :? 　CSS2　基本的希臘小寫字母?

hebrew ? : ?　CSS2　傳統(tǒng)的希伯萊數(shù)字 ?

hiragana ? : ?　CSS2　日文平假名字符 ?

hiragana-iroha ? :? 　CSS2　日文平假名序號(hào) ?

katakana ? : ?　CSS2　日文片假名字符 ?

katakana-iroha ? :? 　CSS2　日文片假名序號(hào) ?

lower-latin ? :? 　CSS2　小寫拉丁字母 ?

upper-latin ? :?　CSS2　大寫拉丁字母?

css樣式修改li水平顯示

將li的樣式設(shè)置成以下例子:display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;可以修改一下，到適合你的要求。

html中l(wèi)i標(biāo)簽的css樣式問(wèn)題

li標(biāo)簽的css樣式名稱是current

其中要說(shuō)明的就是樓上說(shuō)的有點(diǎn)小問(wèn)題，li是dw的默認(rèn)標(biāo)簽所以不需要調(diào)用class,直接設(shè)置完css之后li即可生效。不過(guò)它控制的是所有的li.如果要控制單個(gè)要分開定義css樣式，然后再用class或id調(diào)用.

css樣式中的li

表示和當(dāng)前l(fā)i同級(jí)的所有l(wèi)i標(biāo)簽。不包括父級(jí)li和子級(jí)li。

另外常用的還有l(wèi)ili：這個(gè)表示當(dāng)前l(fā)i的子級(jí)li標(biāo)簽。

新聞標(biāo)題：關(guān)于licss樣式模板的信息
文章URL：http://chinadenli.net/article10/phghdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站內(nèi)鏈、移動(dòng)網(wǎng)站建設(shè)、ChatGPT、手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)