ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css
來源:懂視網
責編:小采
時間:2020-11-27 15:45:45
ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css
ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css_WEB-ITnose:我現在在寫一個導航欄,用ul水平平鋪,但是現在遇到了一個問題,就是要使我用float:left,那么在瀏覽器里放大頁面會發現導航欄會亂掉,要使用display: inline;和white-space: nowrap;可以實現水平平鋪,而且在瀏覽器中放大頁面不會亂,但問題來了,用disp
導讀ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css_WEB-ITnose:我現在在寫一個導航欄,用ul水平平鋪,但是現在遇到了一個問題,就是要使我用float:left,那么在瀏覽器里放大頁面會發現導航欄會亂掉,要使用display: inline;和white-space: nowrap;可以實現水平平鋪,而且在瀏覽器中放大頁面不會亂,但問題來了,用disp

我現在在寫一個導航欄,用ul水平平鋪,但是現在遇到了一個問題,就是要使我用float:left,那么在瀏覽器里放大頁面會發現導航欄會亂掉,要使用display: inline;和white-space: nowrap;可以實現水平平鋪,而且在瀏覽器中放大頁面不會亂,但問題來了,用display: inline;和white-space: nowrap;后,里面的文字無法垂直居中,我是將ul放在一個div里面了,div想要讓ul文字和圖片在div里面垂直居中,并且橫向排列(IE9無法垂直居中,Chrome就可以),這讓人很郁悶,而用float:left就可以垂直居中。
現在有沒有什么辦法,既可以讓ul里面的東西水平平鋪,垂直居中而且在瀏覽器里面方法后不亂的。
代碼如下:
HTML:
">
導航欄 -->
導航欄1 導航欄1 導航欄1 導航欄1 導航欄1 CSS:
.container{height: auto;}
/**頂部菜單**/
.nav{ height:40px;background:url(../images/topbar_bg.gif) repeat-x; margin-top: 0px; padding-top: 0px;line-height: 40px;}
ul{list-style: none; white-space: nowrap;}
ul li{ margin: auto 20px; padding: 0; color: #BFBFBF;display: inline; height: 40px; }
.logo{}
.navleft{}
.navright{margin-right: }
a:link {color: #BFBFBF; text-decoration: none;} /* 未訪問的鏈接 */
a:visited {color: #BFBFBF;border: none;} /* 已訪問的鏈接 */
a:hover {color: #FFFFFF;border: none;} /* 當有鼠標懸停在鏈接上 */
a:active {color: #BFBFBF;border: none;} /* 被選擇的鏈接 */
.menu_right{margin-left: 80px;}
.menu_left{widows: 1px; height: 40px;}
.delimiter{background:url(../images/delimiter.png); margin: 0px; padding: 0px; width: 2px; height: 35px;}
回復討論(解決方案)
1、圖片位置用
調整。
2、字段位置用
調整。
謝謝2位,發現就是圖片的問題,我圖片的高度只有35像素。
我調整了圖片的位置,不過沒有用
用的是
,但是還有一個問題,就是我現在突然發現我IE可以顯示那個豎線的圖片,但是Chrome怎么就顯示出不出來啊?繼續求教
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css
ulli水平排列不斷行和垂直居中問題,求解答,虛心求教。_html/css_WEB-ITnose:我現在在寫一個導航欄,用ul水平平鋪,但是現在遇到了一個問題,就是要使我用float:left,那么在瀏覽器里放大頁面會發現導航欄會亂掉,要使用display: inline;和white-space: nowrap;可以實現水平平鋪,而且在瀏覽器中放大頁面不會亂,但問題來了,用disp