                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /網頁定位導航特效

為什么<li>設置了display：inline可以自動換行？

?如果<li>什么都不設置，那<li>是單獨占一行，感覺是行內元素。

行內元素如果遇到父元素的邊框，應該是不會自動換行的。

在此例子中老師只是把<li>設置為display：inline，<li>就自動換行了。

感覺這個情況跟行內元素的性質沖突了，不太理解請高手解答，謝謝！

補充一下代碼：其實就是按照視頻里面老師代碼敲的。

css文件：

*{ margin:0px; padding:0px;}
body{ font-size:12px; line-height:1.7;}
li{list-style:none;}
#content{width:800px; margin:0 auto; padding:20px ;}
#content h1{ color:#0088bb;}
#content? .item{ padding:20px; margin-bottom:20px; border:2px dotted #0088bb;}
#content? .item h2{
?border:2px solid #0088bb; font-size:16px; font-weight:#0088bb;
?margin-button:10px;}
#content .item li{ ?display:inline;? margin-right:10px; ?}
#content .item li a img{ width:230px; height:230px; border:none; }
#menu{ width:80px; position:fixed; top:100px;
???????????? left:50%; margin-left:400px; }

HTML文件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地狗購物網-網頁定位導航效果</title>
<link href="css/sp1css.css" type="text/css" rel="stylesheet"/>
</head>
???????
<body>?????
??<div id="menu">
?????????? ??<ul>
?????????????? ??<li><a href="#">1F 男裝</a></li>
??????????????????? <li><a href="#">2F 女裝</a></li>
??????????????????? <li><a href="#">3F 美妝</a></li>
??????????????????? <li><a href="#">4F 數碼</a></li>
??????????????????? <li><a href="#">5F 母嬰</a></li>
?????????????? </ul>
??????? </div>
??????? <div id="content">
??????? ??<h1>地狗購物網</h1>??
???????????????? <div id="item1" class="item">
?????????? ?? ??<h2>1F 男裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/1F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item2" class="item">
?????????? ?? ??<h2>2F 女裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/2F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item3" class="item">
?????????? ?? ??<h2>3F 美裝</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/3F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item4" class="item">
?????????? ?? ??<h2>4F 數碼</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/4F.png"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????????????? <div id="item5" class="item">
?????????? ?? ??<h2>5F 母嬰</h2>
??????????????????????? <ul>
??????????????????????? ??<li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????????????? <li><a href="#"><img src="imgs/5F.jpg"/></a></li>
??????????????????????? </ul>
???????????????? </div>
???????? </div>
</body>?

edward12

2015-11-20

源自：網頁定位導航特效 4-1

關注問題我要回答

12618

操作

收起

3 回答

李曉健回答被采納 +3 積分
2015-11-20

給一下完整代碼

0 回復有任何疑惑可以回復我~

收起回答

edward12 提問者

已經補充代碼,麻煩您看一下，謝謝。

2015-11-20 回復有任何疑惑可以回復我~

edward12 提問者

非常感謝您的回答

2015-11-20 回復有任何疑惑可以回復我~

李曉健
2015-11-20

li 默認的?? ?display:?list-item; ? ?這個應該和block 差不多，是獨占一行的。也可以設置寬高。所以不會換行。你改成了display:inline-block; 會就不會獨占一行了，但是還是可以設置寬和高。

0 回復有任何疑惑可以回復我~

收起回答

edward12 提問者

謝謝您的回答，我在DW上重新試過，上述代碼無論<li>設為inline 或是 inline-block，效果都是一樣的其實我想問的是：當行內元素排列長度超過父元素時，到底會不會換行？因為我是初學，向來對行內元素的理解是無論怎樣行內元素都應該留在一行內。在上述代碼中的情況就是id=content的div的寬度是800px 每一張圖寬度為230px；每一行當排到第四幅時位置不夠了。按照我自己的理解，圖片應該是打橫溢出，也就是不換行。但事實上圖片沒有溢出content div，而是換行了。可能我對行內元素的理解不太正確。請問您對此有何看法？謝謝！

2015-11-20 回復有任何疑惑可以回復我~

李曉健回復 edward12 提問者

inline 和 inline-block 超過父元素會換行的。行內元素不是留在一行內，而是他的寬度和高度是由內容撐起來，設置寬度和高度是無效的。

2015-11-20 回復有任何疑惑可以回復我~

edward12 提問者
2015-11-20

補充一下代碼：其實就是按照視頻里面老師代碼敲的。

css文件：

*{ margin:0px; padding:0px;}
body{ font-size:12px; line-height:1.7;}
li{list-style:none;}
#content{width:800px; margin:0 auto; padding:20px ;}
#content h1{ color:#0088bb;}
#content? .item{ padding:20px; margin-bottom:20px; border:2px dotted #0088bb;}
#content? .item h2{
?border:2px solid #0088bb; font-size:16px; font-weight:#0088bb;
?margin-button:10px;}
#content .item li{ ?display:inline-block;? margin-right:10px; ?}
#content .item li a img{ width:230px; height:230px; border:none; }
#menu{ width:80px; position:fixed; top:100px;
???????????? left:50%; margin-left:400px; }

HTML文件：

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

網頁定位導航特效

參與學習 71393 人
解答問題 504 個

本課程講解網頁定位導航特效，仿天貓版地狗購物網，你值得擁有

進入課程

本課相似問答

2 回答不設置li為行內元素，設置圖片為左浮動為什么就不行

2 回答為什么當滾動條滾動時，導航菜單沒能自動設置焦點呢？錯在哪了，請大神指教

1 回答為什么設置圖片背景？！

4 回答為什么沒有寫點擊添加current,這個自動就實現了呢

2 回答h1 和 h2 為什么會自動加有下劃線？求教

搜索更多本課相關問答

為什么<li>設置了display：inline可以自動換行？

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么<li>設置了display：inline可以自動換行？

3 回答

本課相似問答

為什么<li>設置了display：inline可以自動換行？

為什么<li>設置了display：inline可以自動換行？