求高手如何設定css才能讓多個li自適應100屏寬

2021-05-11 16:39:58 字數 3737 閱讀 9788

1樓:紫萱是條小狐狸

樓主看下是不是這樣的效果,把對應的寬度值換成你要的寬度就可以了

2樓:匿名使用者

.image_box {margin:0 auto;}

.image_box ul

.image_box ul li {width:100%; margin:0 auto; }

3樓:夨情

ul設定固定寬度,然後給屬性 margin : auto;

4樓:

.image_box

.image_box li

24% 可以隨便調啦, 放幾個就100/幾 再減幾個畫素就可以

css中li的橫向排列自適應寬度的問題

5樓:我是苦頭陀螺

當父元素和子元素都沒有定義寬度的情況下實現水平居中:

display:inline-block

可以使用text-align:center和display:inline-block相結合,這個技巧需要一個父元素。

1、html**:

**如下:

home …

2、css**:

**如下:

.navbar

.navbar ul

.navbar li

.navbar li + li

3、ie系列ie8+支援,要ie7 ie6 支援需要加入以下**使display:inline像display:inline-block一樣

**如下:

.navbar ul

position:relative

使用position:relative與float相結合的技巧及其浮動和定位參照物的關係,這個技巧需要兩個父元素,一個用來定位而另外一個用來避免出現滾動條。

html**:

**如下:

home …

css**:

**如下:

.navbar

.navbar > div

.navbar ul

.navbar li

.navbar li + li

瀏覽器支援度較低 只chrome和firefox這樣的-webkit- -moz-核心瀏覽器。當然以後慢慢會發展起來的。

這個方式是推動瀏覽器發展的一個新的東西,目前**於所以可以寫字首的瀏覽器,並沒有工作在ie9和ie9以下。

根據你的需求來選擇合適的方法吧,display:inline-block相容性較好,flex-box將會用於未來。

6樓:黑馬程式設計師

首先學習一下width屬性的定義和用法:

定義和用法

width 屬性設定元素的寬度。

說明這個屬性定義元素內容區的寬度,在內容區外面可以增加內邊距、邊框和外邊距。

行內非替換元素會忽略這個屬性。

可以通過width屬性設定li中欄位的寬度根據實際長度顯示寬度。在li的樣式中加上width:auto;就可以實現了;現在來看下面一段**:

css樣式設定:

#info_main

#info_main li

網頁**:

點選:次

7樓:一言驚醒

字數不一樣的話,你這樣太麻煩了

首頁我們的服務

8樓:

那就不要給li設定寬度,寫一個padding就好了,然後居中,這樣就會自動伸長了~

把導航結構貼一下,我幫你改改~

css怎樣設定ul的li 居中均勻排列

9樓:匿名使用者

ie6的margin的bug最好解決了,在浮動後有magin的div裡寫一句display:inline就可以解決

如果想少出現相容問題可以使用padding

10樓:回憶

css設定ul的li 居中均勻排列,我們首先需要做的就是將這個ul的width和height確定,使用margin讓ul居中,margin的用法如圖:

,然後在設定li的width和height,然後給li一個float,通過**來理解:

名字1名字2

名字3名字4

11樓:匿名使用者

有幾種方法,一,設定最小寬度,二,設定padding和margin屬性,三,設定寬度成%比。

12樓:╟雪♂楓

你適當的設定margin和padding試試

13樓:和你一起自暴

home

about us

department

declaration>

services

div+css樣式,li自動適應高度,自動換行,橫向排列

14樓:達豐

html部分:

aaaa

bbbb

cccc

dddd

eeee

ffff

css部分:

#nav

ul,li

ulli

擴充套件資料:

flex是flexible box的縮寫,用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為flex佈局。

採用flex佈局的元素,被稱為flex容器(flex container),簡稱「容器」。其所有子元素自動成為容器成員,成為flex專案(flex item),簡稱「專案」。

容器預設存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),預設專案按主軸排列。

main start/main end:主軸開始位置/結束位置;

cross start/cross end:交叉軸開始位置/結束位置;

main size/cross size:單個專案佔據主軸/交叉軸的空間;

設定在容器上的屬性有6種。

flex-direction

flex-wrap

flex-flow

justify-content

align-item

align-content

15樓:匿名使用者

換行:給li裡面的a設成塊級元素並給寬度和行高,如果li不包含a就在li上面設。

橫排:把li浮動起來,一排能橫排多少個,取決於你li的寬度和外面ul的寬度

16樓:匿名使用者

將li的樣式設定成以下例子:

display:inline;line-height:24px;height:

auto;word-break:break-all;word-wrap : break-word ;

可以修改一下,到適合你的要求。

17樓:匿名使用者

要看你li裡面的內容了,li應該是本身就適應自動高度,給li寬度,裡面的文字就會自動換行了,橫向排列是想讓 li都橫向排列,那就寫 float:left

18樓:匿名使用者

li 張家界 鳳凰 長沙 衡山 韶山 岳陽樓 周洛 郴州 衡山 桃花源 寧鄉 大圍山

19樓:宇宙的大象

橫向排列 float:left; li的高度設定line-height:??px即可

如何設定才能讓一臺計算機可以多個使用者同時登陸

第一 共享的前提工作 1.更改不同的計算機名,設定相同的工作組!2.我的電腦右鍵 管理 計算機管理 本地使用者和組 使用者 更改管理員使用者名稱 3.手動設定ip,將ip設定在同一個網段,子網掩碼和dns解析相同 5.執行裡輸入services.msc回車開啟服務 第二 共享的準備工作 1.開始 設...

如何才能讓自己成為社交高手,怎麼才能成為社交高手

1.站在對方立場設想,將心比心,並且用溫暖 尊重 瞭解的方式去溝通 2.瞭解溝通的障礙並且儘可能去突破 3.得有與人溝通的意願,以一顆開放的心靈傾聽,千萬不要立即下價值判斷,而最好以對方的立場和觀點去設想。4.當一位好聽眾,用我們的心靈去聽聽對方的想法與感受,而不只是字面上的意思。然後要坦誠地告訴對...

ROS如何設定才能讓h3c5600三層交換機下所有Vlan介面的電腦上外網

在ros路由器上新增到內網的回程路由,再做 nat即可。h3c三層交換機設定好vlan後準備連線路由器上外網,怎麼設定才能讓所有vlan下的所有客戶端都連 企業級的三層交換機vlan劃分是為了子網劃分,在三層交換機上要進行路由配置。具體命令網路上有很多資料,可以根據網路引數進行配置。h3c三層交換機...