CSSli標籤寬度問題,CSSul寬度大於外部寬度ul中li自動換行,怎麼讓他不換行

2021-03-03 21:55:52 字數 3167 閱讀 4835

1樓:匿名使用者

將display:inline 改成 display:inline-block 就大功告成了。

將一行的li元素視作類似div的盒子,這樣width就能生效了。而不是對文字的屬性才有效果

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

2樓:我是苦頭陀螺

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

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將會用於未來。

3樓:黑馬程式設計師

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

定義和用法

width 屬性設定元素的寬度。

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

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

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

css樣式設定:

#info_main

#info_main li

網頁**:

點選:次

4樓:一言驚醒

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

首頁我們的服務

5樓:

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

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

css ul寬度大於外部寬度 ul中li自動換行,怎麼讓他不換行 80

6樓:匿名使用者

外層div設個可見區域寬

度,同時益處隱藏。

li左浮動,接下來是重點啦!!!!

設定ul寬度,設一個大一些的值,例如5000px,或者用指令碼來動態計算賦值也行。這樣就能實現你想要的效果。哎,當初剛學時這都不叫事,好久沒用了,現在也遇到這個問題了,墨跡了半天才發現原因......

7樓:匿名使用者

mytab ul li 裡面的display:inline ,理論上就不換行了, 但是 本身你裡面的寬度大於外面的就不對! 或者你可以讓裡面滾動 overflow:

scroll;

8樓:

設定ul高度和寬度並且設定overflow:hidden;

9樓:我_問_你_答

宣告檔案頭了嗎?

10樓:匿名使用者

設定ul的寬度。。可以each每個li,計算總的li寬度

11樓:匿名使用者

使用超出隱藏即可…或者用程式設定字元最大寬度 比如20個漢字40個位元組

程式的我不會 但用純css你可以設定固定寬度和高度然後設定overflow:hidden;

ul為什麼要大於外部寬度?搞不懂……

12樓:mm小麻

把外部的div變寬不就行了麼 要是要求外面不變 就ul定義position:absolute唄

ul裡定義的

overflow:hidden;

white-space:nowrap;

是幹嗎用的??超出隱藏li?

想要實現的主要功能說一下 也方便別人幫你解答

  • 標籤和
  • 之中標籤文字大小如何改變

    13樓:無可奈何

    直接使用css樣式就是可以改變li之間的文字大小的,css中修改文字的大小使用的是font-size屬性。

    工具原料:編輯器、瀏覽器

    1、首先給ul或者li新增id或者class屬性,然後在css樣式表中給其應用font-size屬性,簡單的**示例如下:

    body>

    文字一文字二

    文字三文字四

    2、給第三個li設定了字型的大小為30畫素,執行的效果如下:

    14樓:虎貓**

    這是典型的css選擇器權重問題,css選擇權重用高到低依次是important > 內聯 > id > 類 > 標籤 | 偽類 | 屬性選擇 > 偽物件 > 繼承 > 萬用字元,#logo ul li a的id許可權明顯是高於類的.left a許可權,所以從你現在的css來看,要想改變left裡面的字型,建議直接這樣寫哈哈

    css標籤問題,CSS基本標籤問題!

    css選擇器有三種型別 標記選擇器 類別選擇器 id選擇器 一 標記選擇器 就是 o 標籤 重新定義。標記選擇器是必須使用html的標籤作為選擇器的名稱,也就是說 2 當選中第二個時候,名稱框中必須是下拉選單框中的內容 是的。格式 標記名稱 例子 標記選擇器 二 類別選擇器 就是 o 類 可應用於任...

    火狐瀏覽器怎麼設定標籤頁寬度,火狐瀏覽器怎樣設定書籤工具欄裡書籤的最大寬度?

    安裝tab mix plus擴充套件即可 tab mix plus 加強firefox 的標籤頁瀏覽功能。它包括的功能有複製標籤 集中控制標籤 標籤點選選項卡 撤銷關閉的標籤和視窗等等。它還包括一個功能全面的會話管理器。安裝擴充套件tab utilities,找到這個擴充套件的選項,在外觀下可以設定...

    thinkphp標籤替換的問題,thinkphp模板標籤 替換的問題

    使用 可以實現你要的功能。如果前面輸出的變數是在後面定義的函式的第一個引數,則可以省略 但是在str replace函式中,前面的輸出的變數是該函式的第三個引數,因此不可以省略,必需寫全。tp5中模版標籤 和js外掛衝突時除了修改配置檔案還有什麼好的解決方法沒有?已經做好幾個頁面了,120 那你看一...